<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8"/>

	<!-- force latest ie rendering engine (even in intranet) -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

	<title>HTML5 Today</title>
	<meta name="description" content="Are you curious about all the HTML5 buzz? Don't understand what the big deal is (after all, it's just HTML)? We'll show you what's in HTML5 and related technologies as well as outline a few forward-looking discussions. Expect to walk away with an understanding of what's in HTML5, why you should be using it today, and a guide to get you started."/>
	<meta name="msapplication-task" content="name=Start Presentation;action-uri=index.html;icon-uri=favicon.ico"/>
	<meta name="msapplication-task" content="name=Tools & Resources;action-uri=index.html#resources;icon-uri=favicon.ico"/>
	<meta name="msapplication-task" content="name=About Michael Flanakin;action-uri=http://about.me/flanakin;icon-uri=http://michaelflanakin.com/portals/michaelflanakin.com/favicon.ico"/>
	<meta name="msapplication-task" content="name=About James Wren;action-uri=http://twitter.com/mrharb;icon-uri=http://twitter.com/favicon.ico"/>
	<meta name="author" content="Michael Flanakin"/>
	<meta name="author" content="James Wren"/>
	<link rel="license" href="http://html5today.codeplex.com/license"/>
	<link rel="author" href="../humans.txt"/>

	<!-- mobile viewport optimized: j.mp/bplateviewport -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

	<!-- place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
	<link rel="shortcut icon" href="../favicon.ico"/>
	<link rel="apple-touch-icon" href="../apple-touch-icon.png"/>
	
	<!-- css: implied media="all" and type="text/css" -->
	<link href="../content/read.css" rel="stylesheet"/>
	<link href="../content/print.css" rel="stylesheet" media="print"/>
	<link href="../content/reset-after.css" rel="stylesheet"/>

	<!-- uncomment if you are specifically targeting less enabled mobile browsers
	<link rel="stylesheet" media="handheld" href="../content/handheld.css?v=2">  -->

	<!-- syntax highlighter -->
	<link rel="stylesheet" href="../content/shCoreDefault.css"/> 

	<!-- all JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
	<script src="../scripts/modernizr-2.0.6.min.js"></script>
</head>
<body>
	<div id="container">

		<header id="top">
			<h1>HTML5 Today</h1>
			<nav>
				<ul>
					<li><a class="semantics" href="#semantics"><img src="../content/images/classes/96x.png" alt="Semantics"/>Semantics</a></li>
					<li><a class="offstore" href="#offstore"><img src="../content/images/classes/96x.png" alt="Offline &amp; Storage"/>Offline &amp; Storage</a></li>
					<li><a class="device" href="#device"><img src="../content/images/classes/96x.png" alt="Device Access"/>Device Access</a></li>
					<li><a class="connect" href="#connect"><img src="../content/images/classes/96x.png" alt="Connectivity"/>Connectivity</a></li>
					<li><a class="media" href="#media"><img src="../content/images/classes/96x.png" alt="Multimedia"/>Multimedia</a></li>
					<li><a class="graphics" href="#graphics"><img src="../content/images/classes/96x.png" alt="3D, Graphics, &amp; Effects"/>3D, Graphics, &amp; Effects</a></li>
					<li><a class="perfint" href="#perfint"><img src="../content/images/classes/96x.png" alt="Performance &amp; Integration"/>Performance &amp; Integration</a></li>
					<li><a class="styling" href="#styling"><img src="../content/images/classes/96x.png" alt="CSS3 Styling"/>CSS3 Styling</a></li>
				</ul>
			</nav>
			<!-- TODO: Add an as-of date; the spec has already changed some features :-/ -->
		</header>


		<article id="html5">
			<header id="html5-top">
				<h1>HTML5 is...</h1>
				<ul>
					<li><span class="orgs">4</span> organizations</li>
					<li><span class="groups">13</span> working groups</li>
					<li><span class="pubs">211</span> publications</li>
					<li><span class="specs">189</span> specs</li>
					<li><span class="pages">12,034</span> pages</li>
					<li><span class="bugs">946</span> unresolved bugs &amp; issues</li>
					<li>A snapshot of the HTML living standard</li>
				</ul>
				<aside>
					<p>
						HTML5 isn't just one big specification. It's a series of specifications, managed by 
						<span class="orgs">4</span> different organizations and <span class="groups">13</span> working 
						groups. The core HTML5 spec alone is <span class="html5pages">1308</span> pages and has 
						<span class="html5bugs">256</span> outstanding bugs; however, alltogether, there are grand 
						total of <span class="pages">12,034</span> pages of tree-murdering glory, backed by 
						<span class="bugs">946</span> unresolved bugs and issues across all <span class="pubs">211</span> 
						publications managed by the entire HTML community. With all that said, HTML5 is a snapshot of 
						the "living standard," focused on the more stable features.
					</p>
					<p>
						As you might expect, the World Wide Web Consortium (W3C) is responsible for the HTML5 
						specification; however, the "living standard" is being maintained by a relatively new player on 
						the block, the Web Hypertext Application Technology Working Group (WHATWG). If you're familiar 
						with some of the history of the web, you might be surprised by this. To better understand, 
						we'll need to take a quick trip through memory lane...
					</p>
				</aside>
			</header>
			<section id="html5-history">
				<header><h1>HTML5 is...full of drama</h1></header>
				<!-- TODO: Create a visualization of this timeline that shows the HTML5 logo in human stages @ 0 (diaper + binky), 2 (shoes), 5-7 (report card), 9-11 (soccer ball), 16 (car keys), 18 (grad), 21 (beer/alcohol) -->
				<ol>
					<li><b>1990</b> Tim Berners-Lee designed HTML</li>
					<li><b>1992</b> HTML+ spec created by Dan Connolly</li>
					<li><b>1995</b> IETF released HTML 2.0 as RFC 1866</li>
					<li><b>1996</b> IETF closed HTML Working Group</li>
					<li><b>1997</b> W3C published HTML 3.2, introducing new visual markup tags</li>
					<li><b>1997</b> W3C published HTML 4.0, <span class="slidenote" title="I guess those weren't such a good idea, after all">deprecating the visual markup tags</span></li>
					<li><b>1999</b> W3C published HTML 4.01, resolving outstanding bugs</li>
					<li><b>2000</b> W3C published <span class="slidenote" title="on the way to a brighter, XML future!">XHTML 1.0</span></li>
					<li><b>2000</b> W3C chartered HTML Working Group to move to XML</li>
					<li><b>2001</b> W3C published XHTML 1.1</li>
					<li><b>2004</b> <span class="slidenote" title="...as in, 'WHAT' the heck are they doing!?">WHATWG</span> launched, targeting evolutionary specifications</li>
					<li><b>2006</b> Tim Berners-Lee <span class="slidenote" title="yeah, we hear you!">"reinvented HTML" (and the working group)</span></li>
					<li><b>2008</b> W3C released First Public Working Draft of HTML5</li>
					<li><b>2010</b> W3C closed XHTML Working Group</li>
				</ol>
				<aside>
					<p>
						<!-- TODO: Can a <time> element specify a year only? -->
						You are obviously aware of HTML, a standard markup language that represents content within a web
						page. HTML was designed by Tim Berners-Lee at <abbr title="European Organization for Nuclear Research ">CERN</abbr> 
						as part of the <time>1990</time> World Wide Web Project and later formalized into a 
						<abbr title="Document Type Definition">DTD</abbr> and brief spec, 
						<a href="http://www.w3.org/MarkUp/HTMLPlus/htmlplus_1.html">HTML+</a>, by Dan Connolly in 
						<time>1992</time>. At this point, HTML had a mere 78 tags.
					</p>
					<p>
						In <time datetime="1995-09-22">1995</time>, HTML 2.0 was released by the IETF as 
						<a href="http://tools.ietf.org/html/rfc1866">RFC 1866</a> and, with 
						it, came a set of new and deprecated tags. HTML 2.0 was followed by a few additional RFCs, but 
						the IETF ultimately closed its HTML Working Group in <time>1996</time>, which spurred the 
						2-year-old W3C to publish the next major version in <time datetime="1997-01-14">Jan 1997</time>.
					</p>
					<p>
						As a result of the visual enhancements in web browsers, <a href="http://www.w3.org/TR/REC-html32">HTML 
						3.2</a> adopted a series of visual markup tags previously implemented in the Netscape Navigator 
						web browser (e.g. &lt;font&gt;). However, in <time datetime="1997-12-18">Dec 1997</time>, 
						<a href="http://www.w3.org/TR/REC-html40-971218/">HTML 4.0</a> sought simplification and 
						deprecating the visual markup tags in favor of CSS, which was introduced in 
						<time datetime="1996-12-17">Dec 1996</time>. This was the beginning of a movement to make HTML 
						a more semantic language.
					</p>
					<p>
						In <time datetime="1999-12-24">Dec 1999</time>, HTML 4.0 was superceded by 
						<a href="http://www.w3.org/TR/html401/">HTML 4.01</a>, the current version; but was far from 
						the language the W3C thought it needed to be to truly revolutionize the web.
					</p>
					<p>
						Armed with a goal of creating a more semantic web, where content and presentation remained 
						separate, enabling richer experiences powered by remote services, <a href="http://www.w3.org/TR/xhtml1/">XHTML 
						1.0</a> was published in <time datetime="2000-01-26">2000</time> and, shortly after, the W3C 
						HTML Working Group was chartered to transition to XML. Notably, these goals were a big part of 
						the "Web 2.0" movement to "AJAXify" sites.
					</p>
					<p>
						With their new charter, the group published <a href="http://www.w3.org/TR/2001/REC-xhtml11-20010531/">XHTML 
						1.1</a> in <time datetime="2001-05-31">2001</time> and started working on several specifications 
						which would lead up to <a href="http://www.w3.org/TR/xhtml2/">XHTML 2.0</a>; however, this 
						was met by an unexpected outcry from the web design/development community.
					</p>
					<p>
						In 2004, after continued unrest in the web design/development community for an evolutionary 
						approach, the <a href="http://www.whatwg.org/news/start">WHATWG officially launched</a>, backed 
						by Apple, Mozilla, and Opera. This, followed by ongoing protests, spurred Tim Berners-Lee to 
						<a href="http://dig.csail.mit.edu/breadcrumbs/node/166">publish a note outlining a new 
						direction for the W3C HTML Working Group</a> in <time datetime="2006-10-27">2006</time>, 
						intended to refocus efforts on incremental improvements to the HTML standard, instead of the 
						revolutionary move to XHTML previously planned. With this, HTML5 was officially born in early 
						<time>2008</time> and the XHTML Working Group ultimately closed in <time datetime="2010-11-23">Dec 
						2010</time>.
					</p>
				</aside>
			</section>
			<section id="html5-pubs">
				<header><h1>HTML5 is...many things</h1></header>

				<embed class="svg" src="../content/images/html5-pubs.svg" type="image/svg+xml" style="width:900px"/>
				<ul class="no-svg">
					<li>
						<h2>HTML</h2>
						<ul class="html">
							<li><progress value="2" max="5"><span>Last Call</span></progress>HTML5</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>HTML + RDFa</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>HTML Microdata</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>HTML Canvas 2D Context</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>HTML5 Markup</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>HTML5 Diff from HTML4</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Polyglot Markup (HTML/XHTML Compat)</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Text Alternatives</li>
						</ul>
					</li>
					<li>
						<h2>Web Apps</h2>
						<ul class="webapps">
							<li><progress value="0" max="5"><span>Not Published</span></progress>Asynchronous DOM Mutation Notification</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Clipboard APIs and Events</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Cross-Origin Resource Sharing (CORS)</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L1</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Core</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Events</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 HTML</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Style</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Traversal and Range</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Views</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM L3 Abstract Schemas</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L3 Core</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>DOM L3 Events</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L3 Load and Save</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L3 Validation</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM L3 Views and Formatting</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM L3 Xpath</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>DOM L4 Core</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM Requirements</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>Element Traversal</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>File API</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>File API: Directories and System</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>File API: Writer</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Index DB</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>Programmable HTTP Caching and Serving</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Progress Events</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Selectors API</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Selectors API L2</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Server-Sent Events</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Uniform Messaging Policy</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Web DOM Core</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Web IDL</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Web Messaging</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Web Sockets</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>Web SQL Database</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Web Storage</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Web Workers</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress><abbr title="XML Binding Language">XBL</abbr>2 Spec</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress><abbr title="XML Binding Language">XBL</abbr>2 Primer</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>XmlHttpRequest</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>XmlHttpRequest L2</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Widget Access Request Policy</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Widget Digital Signatures</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Widget Interface</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Widget Packaging and XML Configuration</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Widget Updates</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Widget URIs</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Widget view-mode Media Feature</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Widgets Embedding</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>Widgets 1.0: Landscape</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>Widgets 1.0: Requirements</li>
						</ul>
					</li>
					<li>
						<h2>Geolocation</h2>
						<ul class="geo">
							<li><progress value="0" max="5"><span>Not Published</span></progress>DeviceOrientation Event</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Geolocation API</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Geolocation API L2</li>
						</ul>
					</li>
					<li>
						<h2>Device</h2>
						<ul class="device">
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>Access Control Use Cases and Requirements</li>
							<li><progress value="-0" max="5"><span>Not Published</span></progress>APIs Design Patterns</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>APIs Requirements</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Application Launcher</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Batter Status</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Calendar API</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Contact API</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Feature Permissions</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Gallery</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Media Capture API</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Media Capture (HTML)</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Messaging API</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Network Information API</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>Privacy Requirements</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Privacy Ruleset</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Permissions for Device API Access</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Systems Info and Events</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Tasks</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>User Interaction</li>
						</ul>
					</li>
					<li>
						<h2>Web Notifications</h2>
						<ul class="webnot">
							<li><progress value="0" max="5"><span>Not Published</span></progress>Web Notifications</li>
							<li><progress value="-0" max="5"><span>Not Published</span></progress>Web Notifications Overview</li>
						</ul>
					</li>
					<li>
						<h2>Web Performance</h2>
						<ul class="webperf">
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Navigation Timing</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Performance Timeline</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Resource Timing</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>User Timing</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Page Visibility</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Timing Control for Script-Based Animations</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Efficient Script Yielding</li>
						</ul>
					</li>
					<li>
						<h2>Web RTC</h2>
						<ul class="webrtc">
							<li><progress value="0" max="5"><span>Not Published</span></progress>Audio Stream Functions</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Functional Component Functions</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Media Stream Functions</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>P2P Connection Functions</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Video Stream Functions</li>
						</ul>
					</li>
					<li>
						<h2>CSS</h2>
						<ul class="css">
							<li><progress value="5" max="5"><span>Recommendation</span></progress>CSS1</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>CSS2</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>CSS 2.1</li>
							<li><progress value="-5" max="5"><span>Note</span></progress>Snapshot 2007</li>
							<li><progress value="-5" max="5"><span>Note</span></progress>Snapshot 2010</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>2D Transforms</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>3D Transforms</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Animations</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Aural Style Sheets</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Backgrounds and Borders L3</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Backgrounds and Borders L4</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Behavioral Extensions</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Box Model (Basic)</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Box Model (Extended)</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Cascading and Inheritance</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Color</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Color Correction</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Device Adaptation</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Exclusions</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Flexible Box Layout</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Fonts</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Generated and Replaced Content</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Generated Content for Paged Media</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Grid Layout</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Grid Positioning</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Hyperlink Presentation</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Image Values and Replaced Content</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Line Formatting</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Line Grid</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Lists and Counters</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Marquee</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Math</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Media Queries</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Mobile Profile 2.0</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Multi-column Layout</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Namespaces</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Object Model L3</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Object Model View</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Page Media</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Presentation Levels</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Print Profile</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Positioning</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Reader Media Type</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Regions</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Ruby</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Scoping</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Selectors L3</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Selectors L4</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Speech</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Style Attributes</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Syntax</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Tables</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Template Layout</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Text</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Transitions</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>TV Profile</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>UI</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Values and Units</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Writing Modes</li>
						</ul>
					</li>
					<li>
						<h2>SVG</h2>
						<ul class="svg">
							<li><progress value="5" max="5"><span>Recommendation</span></progress>SVG 1.1</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>SVG 1.1 2Ed</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>SVG 1.1 Mobile</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>SVG 1.2 Tiny</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>SVG2</li>
							<li><progress value="-5" max="5"><span>Note</span></progress>Accessibility</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Color: Primer</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Color: Language</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Compositing</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Connector: Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Connector: Language</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Filter Requirements</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Filters: Primer</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Filters: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Gradients (Advanced)</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Fonts</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Integration</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Layout Requirements and Use Cases</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Layout: Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Layout: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Masking and Clipping</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Media Access Events</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Paint Servers</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Parameters: Primer</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Parameters: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Printing Requirements</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>pinnedClip Requirements</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>pinnedClip: Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>pinnedClip: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Print Requirements</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Print: Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Print: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Referenced Parameter Variables: Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Referenced Parameter Variables: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Rendering Order: Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Rendering Order: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Text</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms Requirements</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms: Primer</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Transforms: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms (2D FX): Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms (2D FX): Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Vector Effects Requirements</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Vector Effects: Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Vector Effects: Language</li>
						</ul>
					</li>
					<li>
						<h2>ECMAScript</h2>
						<ul class="ecma">
							<li><progress value="5" max="5"><span>Recommendation</span></progress>ECMA-262</li>
						</ul>
					</li>
					<li>
						<h2>IETF</h2>
						<ul class="ietf">
							<li>Web Origin Concept</li>
							<li>WebSocket Protocol</li>
						</ul>
					</li>
				</ul>

				<aside>
					<p>
						The HTML Working Group is responsible for 8 recommendations and notes, one of which is in 
						cooperation with the RDF Web Apps Working Group.
					</p>
				</aside>
			</section>
			<section id="html5-process">
				<header><h1>HTML5 is...victim to a process</h1></header>
				<!-- TODO: Consider a visualization for this workflow; see: http://www.w3.org/Consortium/Process -->
				<ol>
					<li><progress value="1" max="5"><span>Working Draft</span></progress>First Public Working Draft</li>
					<li><progress value="2" max="5"><span>Last Call</span></progress>Last Call Working Draft <span id="html5-ishere">HTML5 "last call" ended <time datetime="2011-08-03">Aug 3, 2011</time></span></li>
					<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Candidate Rec</li>
					<li><progress value="4" max="5"><span>Proposed Rec</span></progress>Proposed Rec</li>
					<li><progress value="5" max="5"><span>Recommendation</span></progress>Recommendation</li>
				</ol>
				<aside>
					<p>
						The <a href="http://www.w3.org/Consortium/Process/">W3C's recommendation approval process</a> 
						consists of 5 steps. When the responsible working group is ready to release an initial version, 
						the <b>First Public Working Draft</b> is released. This is typically followed by a deluge of 
						Working Draft updates, as onlookers provide feedback and the working group continues to discuss 
						the pros and cons; but this is still considered the initial step.
					</p>
					<p>
						When the working group believes it has satisfied the core requirements, <b>Last Call</b> is 
						announced, in which other working groups and the public are notified about the group's intention 
						to move this specification forward and that feedback should be provided by a specified deadline.
					</p>
					<p>
						After all issues have been resolved from the Last Call, the specification is then promoted to a 
						<b>Candidate Recommendation</b>, awaiting 2 <em>independent and interoperable</em> 
						implementations. The implementation requirement, however, can be bypassed with senior-level 
						approval.
					</p>
					<p>
						Once approved, the publication is promoted to <b>Proposed Recommendation</b>. Note that it is 
						also possible for a Last Call Working Draft to be promoted directly to Proposed Recommendation, 
						if the necessary qualifications have been met. Lastly, the specification is published as a 
						<b>Recommendation</b>, once it has satisfied all criteria.
					</p>
					<p>
						As of the time of this writing, the core HTML5 specification was scheduled to be a Last Call 
						Working Draft until <time datetime="2011-08-03">Aug 3, 2011</time>.
					</p>
				</aside>
			</section>
			<section id="html5-inprogress">
				<header><h1>HTML5 is...not done</h1></header>
				<!-- TODO: Find a fallback for the <progress> tag (or make one?) -->
				<!-- TODO: Show a visualization (pie chart?) that depicts what percentage of the pubs are at each step in the process -->

				<embed id="html5-inprogress-pubswithout" class="svg js" src="../content/images/html5-pubs.svg" type="image/svg+xml" style="width:900px"/>
				<embed id="html5-inprogress-pubswith" class="svg no-js" src="../content/images/html5-pubs-status.svg" type="image/svg+xml" style="width:900px"/>
				<ul class="no-svg">
					<li>
						<h2>HTML</h2>
						<ul class="html">
							<li><progress value="2" max="5"><span>Last Call</span></progress>HTML5</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>HTML + RDFa</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>HTML Microdata</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>HTML Canvas 2D Context</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>HTML5 Markup</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>HTML5 Diff from HTML4</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Polyglot Markup (HTML/XHTML Compat)</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Text Alternatives</li>
						</ul>
					</li>
					<li>
						<h2>Web Apps</h2>
						<ul class="webapps">
							<li><progress value="0" max="5"><span>Not Published</span></progress>Asynchronous DOM Mutation Notification</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Clipboard APIs and Events</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Cross-Origin Resource Sharing (CORS)</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L1</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Core</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Events</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 HTML</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Style</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Traversal and Range</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L2 Views</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM L3 Abstract Schemas</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L3 Core</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>DOM L3 Events</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L3 Load and Save</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>DOM L3 Validation</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM L3 Views and Formatting</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM L3 Xpath</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>DOM L4 Core</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>DOM Requirements</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>Element Traversal</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>File API</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>File API: Directories and System</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>File API: Writer</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Index DB</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>Programmable HTTP Caching and Serving</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Progress Events</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Selectors API</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Selectors API L2</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Server-Sent Events</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Uniform Messaging Policy</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Web DOM Core</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Web IDL</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Web Messaging</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Web Sockets</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>Web SQL Database</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Web Storage</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Web Workers</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress><abbr title="XML Binding Language">XBL</abbr>2 Spec</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress><abbr title="XML Binding Language">XBL</abbr>2 Primer</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>XmlHttpRequest</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>XmlHttpRequest L2</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Widget Access Request Policy</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Widget Digital Signatures</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Widget Interface</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Widget Packaging and XML Configuration</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Widget Updates</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Widget URIs</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Widget view-mode Media Feature</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Widgets Embedding</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>Widgets 1.0: Landscape</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>Widgets 1.0: Requirements</li>
						</ul>
					</li>
					<li>
						<h2>Geolocation</h2>
						<ul class="geo">
							<li><progress value="0" max="5"><span>Not Published</span></progress>DeviceOrientation Event</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Geolocation API</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Geolocation API L2</li>
						</ul>
					</li>
					<li>
						<h2>Device</h2>
						<ul class="device">
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>Access Control Use Cases and Requirements</li>
							<li><progress value="-0" max="5"><span>Not Published</span></progress>APIs Design Patterns</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>APIs Requirements</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Application Launcher</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Batter Status</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Calendar API</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Contact API</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Feature Permissions</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Gallery</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Media Capture API</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Media Capture (HTML)</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Messaging API</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Network Information API</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>Privacy Requirements</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Privacy Ruleset</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Permissions for Device API Access</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Systems Info and Events</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Tasks</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>User Interaction</li>
						</ul>
					</li>
					<li>
						<h2>Web Notifications</h2>
						<ul class="webnot">
							<li><progress value="0" max="5"><span>Not Published</span></progress>Web Notifications</li>
							<li><progress value="-0" max="5"><span>Not Published</span></progress>Web Notifications Overview</li>
						</ul>
					</li>
					<li>
						<h2>Web Performance Working Group</h2>
						<ul class="webperf">
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Navigation Timing</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Performance Timeline</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Resource Timing</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>User Timing</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Page Visibility</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Timing Control for Script-Based Animations</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Efficient Script Yielding</li>
						</ul>
					</li>
					<li>
						<h2>Web RTC</h2>
						<ul class="webrtc">
							<li><progress value="0" max="5"><span>Not Published</span></progress>Audio Stream Functions</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Functional Component Functions</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Media Stream Functions</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>P2P Connection Functions</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Video Stream Functions</li>
						</ul>
					</li>
					<li>
						<h2>CSS</h2>
						<ul class="css">
							<li><progress value="5" max="5"><span>Recommendation</span></progress>CSS1</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>CSS2</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>CSS 2.1</li>
							<li><progress value="-5" max="5"><span>Note</span></progress>Snapshot 2007</li>
							<li><progress value="-5" max="5"><span>Note</span></progress>Snapshot 2010</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>2D Transforms</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>3D Transforms</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Animations</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Aural Style Sheets</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Backgrounds and Borders L3</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Backgrounds and Borders L4</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Behavioral Extensions</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Box Model (Basic)</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Box Model (Extended)</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Cascading and Inheritance</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Color</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Color Correction</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Device Adaptation</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Exclusions</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Flexible Box Layout</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Fonts</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Generated and Replaced Content</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Generated Content for Paged Media</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Grid Layout</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Grid Positioning</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Hyperlink Presentation</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Image Values and Replaced Content</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Line Formatting</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Line Grid</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Lists and Counters</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Marquee</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Math</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Media Queries</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Mobile Profile 2.0</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Multi-column Layout</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Namespaces</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Object Model L3</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Object Model View</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Page Media</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Presentation Levels</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Print Profile</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Positioning</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Reader Media Type</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Regions</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Ruby</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Scoping</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Selectors L3</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Selectors L4</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Speech</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>Style Attributes</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Syntax</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Tables</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Template Layout</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Text</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Transitions</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>TV Profile</li>
							<li><progress value="3" max="5"><span>Candidate Rec</span></progress>UI</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Values and Units</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Writing Modes</li>
						</ul>
					</li>
					<li>
						<h2>SVG</h2>
						<ul class="svg">
							<li><progress value="5" max="5"><span>Recommendation</span></progress>SVG 1.1</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>SVG 1.1 2Ed</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>SVG 1.1 Mobile</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>SVG 1.2 Tiny</li>
							<li><progress value="5" max="5"><span>Recommendation</span></progress>SVG2</li>
							<li><progress value="-5" max="5"><span>Note</span></progress>Accessibility</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Color: Primer</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Color: Language</li>
							<li><progress value="2" max="5"><span>Last Call</span></progress>Compositing</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Connector: Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Connector: Language</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Filter Requirements</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Filters: Primer</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Filters: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Gradients (Advanced)</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Fonts</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Integration</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Layout Requirements and Use Cases</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Layout: Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Layout: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Masking and Clipping</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Media Access Events</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Paint Servers</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Parameters: Primer</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Parameters: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Printing Requirements</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>pinnedClip Requirements</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>pinnedClip: Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>pinnedClip: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Print Requirements</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Print: Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Print: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Referenced Parameter Variables: Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Referenced Parameter Variables: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Rendering Order: Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Rendering Order: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Text</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms Requirements</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms: Primer</li>
							<li><progress value="1" max="5"><span>Working Draft</span></progress>Transforms: Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms (2D FX): Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Transforms (2D FX): Language</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Vector Effects Requirements</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Vector Effects: Primer</li>
							<li><progress value="0" max="5"><span>Not Published</span></progress>Vector Effects: Language</li>
						</ul>
					</li>
					<li>
						<h2>ECMAScript</h2>
						<ul class="ecma">
							<li><progress value="5" max="5"><span>Recommendation</span></progress>ECMA-262</li>
						</ul>
					</li>
					<li>
						<h2>IETF</h2>
						<ul class="ietf">
							<li><progress value="1"  max="5"><span>Working Draft</span></progress>Web Origin Concept</li>
							<li><progress value="1"  max="5"><span>Working Draft</span></progress>WebSocket Protocol</li>
							<li><progress value="-1" max="5"><span>Draft Note</span></progress>WebSocket Requirements and Features</li>
						</ul>
					</li>
				</ul>
				<aside>
					<!-- TODO: Add talking points, noting what percentage of features are in what stages -->
				</aside>
			</section>
			<footer id="html5-footer">
				<h1>It's complicated!</h1>
				<p><a href="http://www.xtranormal.com/watch/7991991/web-sockets-we-are-the-first">xtranormal.com/watch/7991991</a></p>
				<p>...then we can't use it, right?</p>
				<p id="html5-footer-cantuse" class="no-js"><em>Wrong!</em></p>
				<aside>
					<p>
						Yes, it's true. HTML5 is still being worked on and isn't quite done, yet; but that's why they 
						WHATWG refers to it as a "living standard" &ndash; it's going to continue to be developed over 
						the years, as HTML6 and HTML7 come out. But that doesn't mean you can't start using it today...
					</p>
				</aside>
			</footer>
		</article>


		<article id="detect">
			<header id="detect-top">
				<hgroup>
					<h1><span>Feature detection</span></h1>
					<h2><span>or:</span> How I learned to stop worrying and love HTML5</h2>
				</hgroup>
				<aside>
					<p>
						So, how are you going to use all these fancy shmancy new features when your users are still using IE7 
						or, <a href="http://theie6countdown.com">heaven forbid, IE6</a>? Easy... just tell them to upgrade to 
						<a href="http://www.microsoftstore.com/store/msstore/en_US/pd/productID.216647200/parentCategoryID.44066700/categoryID.50726100/list.true">Windows 
						7</a> and install <a href="http://www.beautyoftheweb.com/#/download">IE9</a>. Case closed!
					</p>
					<p>
						Oh, is that not going to work? Damn. On to Plan B...
					</p>
					<p>
						<!-- TODO: Show the two browser detection snippets on the page in interactive mode, then strike thru them, to enforce the "do not use" message -->
						Whatever you do, absolutely <em>do not</em> use browser sniffing. Browser sniffing is exactly 
						what it sounds like: <code>if ($.browser.msie) { ... }</code> (that dollar sign (<code>$</code> 
						is jQuery, by the way; if you two haven't met, let me introduce you: 
						<a href="http://jquery.com">jquery.com</a>). You might also see some IE-specific code, like 
						<code>&lt;!--[if lt IE 9]&gt; ... &lt;![endif]--&gt;</code>. This is referred to as a 
						conditional comment and is only recognized by IE. Pretty convenient when you need it, but you 
						should always attempt to avoid it, if possible. Why? Because I said so...
					</p>
					<p>
						To date, no browser has implemented every aspect of any version of the HTML spec. Anyone who's 
						spent time building out a dynamic web app knows this &ndash; browsers are a pain to deal with. 
						Luckily, we have an answer to that: feature detection.
					</p>
				</aside>
				<p>But, before we get there, you have a decision to make...</p>
				<dl>
					<dt>Graceful Degradation</dt>
					<dd>
						<aside>
							<p>
								Graceful degradation is a web development strategy that focuses on the most advanced 
								capabilities you can possibly provide to satisfy your users' needs. Then, after you've 
								solved world hunger with your impressive technological prowess, you do the job you'd 
								been dreading since you started, and you test the app with <em>"that other browser."</em> 
								You know which one I'm talking about.
							</p>
							<p>
								Using this paradigm, users on less capable browsers are typically left with what is 
								often considered a "tolerable" experience. Sure, they're able to get their job done, but 
								at what cost? Usability? Accessibility? There are very valid cases where this is 
								acceptible. In general, very little focus tends to be placed on resolving issues found 
								in these limited browsers, since they are considered to be the outliers and, let's face 
								it, we just don't want to deal with them.
							</p>
						</aside>
					</dd>

					<dt>Progressive Enhancement</dt>
					<dd>
						<aside>
							<p>
								Progressive enhancement, on the other hand, focuses on content first, capabilities 
								second. By focusing on the system's core competency &ndash; the content &ndash; you are 
								servicing the broadest spectrum of your users, without explicitly targeting any of them. 
								Whether you bring data in, push data out, or you do the hokey-pokey and you shake it all 
								about, the bottom line is that you're a content peddler in one form or another. That is 
								why this pattern tends to be more appropriate.
							</p>
						</aside>
					</dd>
				</dl>
				<aside>
					<p>
						Obviously, the differences between these two approaches are fairly minimal, but they can impact 
						your project in big ways. Nobody can tell you what the best answer is, however. As always, the 
						"right" answer lies within the metrics you track on a daily basis. And, if you're not 
						tracking metrics, shame on you! You'll need quantitative metrics to truly understand who your 
						users are and what the heck they're doing on your site. Use these numbers to discern probability 
						and focus on that. But, I digress...
					</p>
					<p>
						If you're looking for more information on graceful degradation or progressive enhancement, I recommend the 
						<a href="http://www.alistapart.com/articles/understandingprogressiveenhancement"><i>Understanding 
						Progressive Enhancement</i> article on A List Apart</a>, which covers the topic in more detail. 
						Heck, they're using an M&amp;M as a prop. What other convincing do you need?
					</p>
				</aside>
			</header>
			<section id="detect-js">
				<header><h1>So, yeah, feature detection...</h1></header>
				<aside>
					<p>
						As you can probably guess, feature detection... well, it detects features. Sure, your users will 
						need JavaScript enabled, but how rare is that? <a href="http://www.w3schools.com/browsers/browsers_stats.asp">W3Schools 
						has shown that number declining since <time datetime="2000-01">Jan 2000</time></a> &ndash; aside 
						from a sudden spike in <time datetime="2000-01">Jan 2005</time>, landing at 5% in <time datetime="2000-01">Jan 
						2008</time>, which is their most recent numbers. We can only assume that number has continued to go down. 
						<a href="http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/">Yahoo! 
						did a similar analysis of their traffic in several countries in <time datetime="2010-10-13">Oct 
						2010</time></a>, showing an average of 1% with a high of 2.06% in the US and a low of .26% in 
						Brazil. No matter what W3Schools and Yahoo! have witnessed, I'm going to jump back to a comment 
						I made earlier: "...the 'right' answer lies within the metrics... And, if you're not tracking 
						metrics, shame on you!" But let's get back to feature detection...
					</p>
				</aside>
				<div class="slide">
					<p>Just a bit of JavaScript...</p>
					<!--pre><code>if (<span class="slidenote" title="this just forces it to a Boolean value">!!</span>window.localStorage) { ... }</code></!--pre-->
					<pre class="brush:js">if (!!window.localStorage) { ... }</pre>
					<p class="js localstorage-check">...and, by the way, you <strong class="localstorage">do</strong><strong class="no-localstorage">don't</strong> have support for HTML5 web storage</p>
					<p class="no-js">...but, sadly, you have JavaScript disabled, so you wouldn't get HTML5 web storage love anyway</p>
				</div>
				<aside>
					<p>
						That's it! You just detected that HTML5 web storage is (or isn't) available! For the 
						uninitiated, the double-not (<code>!!</code>) is simply a way to force a Boolean value. Since 
						the standard practice is to return a function reference, which JavaScript will <em>treat</em> 
						this as an affirmative test (not really a Boolean <code>true</code>, but good enough for 
						government work!). It's considered safer, however, to force a Boolean value and be more 
						explicit. The first not (<code>!</code>) will return <code>true</code> if the function doesn't 
						exist and, as you'd expect, the second negates that, executing the internal <code>if</code> 
						block only when web storage is implemented.
					</p>
					<p>
						This is the primary way to do feature detection: to test whether a property/function exists. 
						With that said, different features require slightly altered approaches. To date, there are 4 
						primary conventions for handling these different scenarios.
					</p>
				</aside>
				<dl class="no-js">
					<dt>Global object member check</dt>
					<dd>
						<aside>
							<p>
								We just saw an example of this approach, so there's no real need to go over it again. 
								You simply check to see if a member exists on a global object (e.g. 
								<code>navigator</code>, <code>window</code>) and go about your business.
							</p>
						</aside>
						<pre class="brush:js">if (!!window.localStorage) { ... }</pre>
					</dd>
					
					<dt>Element member check</dt>
					<dd>
						<aside>
							<p>
								The element member check is virtually the same approach as the global object member 
								check except for the fact that a global object is, well, global &ndash; as in, always 
								available &ndash; whereas elements are not. No biggie, we'll just create one using 
								<code>document.createElement()</code>. From there, it's the same approach as before.
							</p>
						</aside>
						<!--code>if (!!document.<span title="this will create an element, even if the browser doesn't know what it is">createElement('video')</span>.canPlayType) { ... }</code-->
						<pre class="brush:js">if (!!document.createElement('video').canPlayType) { ... }</pre>
						<p class="js video-check">...which you <strong class="video">can</strong><strong class="no-video">cannot</strong> use in your browser, by the way</p>
						<aside>
							<p>
								In this example, we created a new <code>&lt;video&gt;</code> element; but since 
								browsers will create any element you can think up without hesitation, we needed to 
								follow that up with a member check, to make sure the browser recognizes the uniqueness 
								of this particular element. Using the double-negative trick we discussed earlier, we 
								now know if the browser can support the <code>&lt;video&gt;</code> element by ensuring 
								the browser recognizes its <code>canPlayType()</code> function.
							</p>
						</aside>
					</dd>
					
					<dt>Function return value check</dt>
					<dd>
						<aside>
							<p>
								Let's extend the previous example to demonstrate feature detection via a function call. 
								In instances like this, standards bodies have recognized that not everyone can provide 
								an all-up story for every possible avenue of a specific feature, so they added functions 
								to do the feature detection work for you. This is as simple as calling a function. 
								You've done that before, right? The only real complication here is that you still need 
								to do the same element member check you did before to make sure you don't hit an 
								exception by calling a member that doesn't exist because the browser can't support the 
								parent feature anyway &ndash; the <code>&lt;video&gt;</code> element, in this case.
							</p>
						</aside>
<pre class="brush:js">var v = document.createElement('video');
if (!!v.canPlayType){
	switch (v.canPlayType('video/mp4; codecs="avc1.4D401E, mp4a.40.2"')) {
		case 'probably': ... break;
		case 'maybe': ... break;
		case '': ... break;
	}
}</pre>
						<p class="js h264-check">...which you <span class="h264-probably">can <em>probably</em></span><span class="h264-maybe"><em>may</em> be able to</span><strong class="no-h264">cannot</strong> play in your browser</p>
						<aside>
							<p>
								Here, we save a <code>&lt;video&gt;</code> element to a local variable to avoid 
								unnecessary DOM calls &ndash; the JavaScript-to-DOM bridge is one area for great 
								performance tweaks &ndash; and then we check for the existence of the 
								<code>canPlayType()</code> function before calling it. Here's where we get into the 
								hokiness of audio/video support, which <a href="#media">we'll get into later</a>. For 
								now, I'll just say that audio/video formats are complex beasts. If the browser's having 
								a good hair day and is feeling confident about the format you're looking for, the best 
								you'll get is a "probably". That makes you feel good, right? Well, it's gotta at least 
								be better than the "maybe" you'll get if the browser forgot to eat its Wheaties that 
								morning and is hesitant to make such a positive affirmation that your content will play. 
								My favorite has to be the negative response: "". Yes, that's right, an empty string. 
								So, if the browser knows it can't support your format, it virtually ignores you.
							</p>
							<p>
								Okay, I'm being a bit extreme here, but it points out the <del>foolishness</del> 
								complexity behind audio/video formats. Why can't we all just get along!?
							</p>
						</aside>
					</dd>
					
					<dt class="no-js">Element attribute value check</dt>
					<dd>
						<aside>
							<p>
								I swear a woman must've come up with this approach to feature detection. Of course, the 
								approach is based completely on backwards-compatibility. The thought is, you set a 
								property and then check back to see if the value you set it to was persisted. Browsers 
								support this due to the forgiving nature of HTML, which you'll see throughout HTML5.
							</p>
						</aside>
<pre class="brush:js">var i = document.createElement('input');
i.type = 'email';
if (i.type == 'email'){ ... }</pre>
						<p class="js emailinput-check">...which you <strong class="emailinput">can</strong><strong class="no-emailinput">cannot</strong> use in your browser</p>
						<aside>
							<p>
								In this example, we create an <code>&lt;input&gt;</code> element, like we've done 
								several times, now; set it's <code>type</code> attribute to "email", one of the new 
								HTML5 input types; and then check to see if it's still set to "email". Browsers that 
								don't support HTML5 input types will revert any invalid type to "text", the default. 
								This works perfectly fine because all input types have a textual representatation 
								&ndash; even if it isn't as good as the new fancy-pants input types.
							</p>
							<p>
								As I eluded to before, this is the approach my wife uses to detect my "listening" 
								feature &ndash; she tells me something and then asks me what she said. Sadly, this 
								feature has a bug in it and tends to be return unpredictable results. Perhaps I should 
								upgrade to a <code>video.canPlayType()</code> approach, and reply back with a "probably" 
								or "maybe". I have a feeling an empty string response wouldn't go so well.
							</p>
						</aside>
					</dd>
				</dl>
				<aside>
					<p>
						Now that we've covered the typical conventions, I'd be remissed not to admit that there are 
						outliers &ndash; aren't there always? Sadly, I ran into one building out this demo. In such 
						cases, we're typically left with the one fallback all developers are used to: exception 
						handling with the almighty <code>try</code>/<code>catch</code> block. Here's an example of that 
						used to check whether a site can be pinned (or is pinned) using IE9.
					</p>
					<code>
						try {<br/>
						&nbsp; &nbsp; if (window.external.msIsSiteMode()){<br/>
						&nbsp; &nbsp; &nbsp; &nbsp; // site is pinned<br/>
						&nbsp; &nbsp; &nbsp; &nbsp; ...<br/>
						&nbsp; &nbsp; }else{<br/>
						&nbsp; &nbsp; &nbsp; &nbsp; // site is not pinned, but can be<br/>
						&nbsp; &nbsp; &nbsp; &nbsp; ...<br/>
						&nbsp; &nbsp; }<br/>
						} catch (e) {<br/>
						&nbsp; &nbsp; // site cannot be pinned<br/>
						&nbsp; &nbsp; ...<br/>
						}
					</code>
					<p>
						In this example, we attempt to call the <code>window.external.msIsSiteMode()</code> function. 
						Unfortunately, due to how <code>window.external</code> was implemented &ndash; it proxies calls 
						to external objects and does not treat them as native calls, like other DOM functions &ndash; 
						there is no way to check to see if the member exists. A call like, <code>window.external.msIsSiteMode</code>, 
						is undefined, even if the call is valid. Luckily, we can simply use a <code>try</code>/<code>catch</code> 
						block to catch the exception and go along our merry way... just with a slight annoyance that we 
						can't use our standard conventions.
					</p>
					<p>
						The bottom line is that, where there's a will, there's a way. You can even check for things like 
						CSS properties. Even better news than that is, you don't need to worry about it. All this has 
						been done for you &ndash; well, at least for most features &ndash; and you're just one line of 
						JavaScript away...
					</p>
				</aside>
			</section>
			<section id="detect-modjs">
				<header><h1>Introducing Modernizr</h1></header>
				<!-- TODO: Consider showing these before/after code snippets on top of each other, where the new code replaces the old code, but keeps all untouched code in the same place so the audience can see what changed -->
				<div class="slide">
					<aside>
						<p>
							Now that you've learned all these cool new feature detection tricks, forget them. You won't need 
							them anymore. Remember that web storage check?
						</p>
					</aside>
					<div class="before"><pre class="brush:js">if (!!window.localStorage) { ... }</pre></div>
					<aside><p>Yeah, that's the one. Let's "modernize" that...</p></aside>
					<!--pre class="brush:js; after">if (Modernizr.local<span class="slidenote" title="notice the different case; Modernizr uses all lowercase names">s</span>torage) { ... }</pre-->
					<div class="after"><pre class="brush:js">if (Modernizr.localstorage) { ... }</pre></div>
				</div>
				<div class="no-js slide">
					<aside>
						<p>
							Well, that was easy. The only real caveat here is that Modernizr uses all lowercase names, 
							instead of matching the case of the real properties. Slight annoyance, but at least you don't 
							need to think about how Modernizr cases them &ndash; they're all lowercase.
						</p>
						<p>
							I did throw out an easy one, though. I doubt you were concerned with how to determine whether 
							web storage support is there. And, if all you care about is a small handful of easy-to-check 
							features, then Modernizr is likely overkill. Let's take a look at that annoying video format 
							check...
						</p>
					</aside>
<div class="before"><pre class="brush:js">var v = document.createElement('video');
if (!!v.canPlayType){
	switch (v.canPlayType('video/mp4; codecs="avc1.4D401E, mp4a.40.2"')) {
		case 'probably': ... break;
		case 'maybe': ... break;
		case '': ... break;
	}
}</pre></div>
					<aside><p>Ugh... I'm already annoyed. If only I could...</p></aside>
<!-- TODO: <span class="slidenote" title="Modernizr only provides this first class support for a few video and audio formats">h264</span> -->
<div class="after"><pre class="brush:js">switch (Modernizr.video.h264) {
&nbsp; &nbsp; case 'probably': ... break;
&nbsp; &nbsp; case 'maybe': ... break;
&nbsp; &nbsp; case '': ... break;
}</pre></div>
					<aside>
						<p>
							...oh, uh... that wasn't too bad. Don't get me wrong, audio/video format checking is still a 
							pain, but at least Modernizr can save you some typing and dramatically increase readability.
						</p>
						<p>
							Now that we know how to detect what features are there, we can include all our scripts and we're 
							an <code>if</code> block away from kick-starting advanced features for those that can use them. 
							But, what about performance? Isn't JavaScript an interpreted language? Won't bigger scripts mean 
							longer load times?
						</p>
						<p>
							Yes, exactly. I'm glad you asked!
						</p>
					</aside>
				</div>
			</section>
			<section id="detect-modload">
				<header><h1>Optimizing with Modernizr.load()</h1></header>
				<aside>
					<p>
						There are a number of ways to optimize your scripts for performance. We're not going to get into 
						a long, drawn-out discussion on how to get the fastest script in the land; but I will mention a 
						few important pointers and then tell you where Modernizr can help.
					</p>
				</aside>
				<!-- TODO: Add talking points to each of these bullets -->
				<div class="slide">
					<ul>
						<li>Minimize lookup time
							<ul>
								<li>Cache references to external objects</li>
								<li>Who are we kidding? You know you're going to need to do this yourself!</li>
							</ul>
						</li>
						<li><span class="slidenote" title="sometimes perceived performance is more advantageous than actual performance">Get out of the way</span>
							<ul>
								<li>Load your scripts last</li>
								<li>Non-blocking, async loading</li>
							</ul>
						</li>
						<li>Fewer requests
							<ul>
								<li>Combine scripts</li>
								<li>Only get what you need and cache it</li>
							</ul>
						</li>
						<li>Smaller requests
							<ul>
								<li>Minimize and Gzip scripts</li>
								<li>Separate conditional resources to lessen larger impact</li>
							</ul>
						</li>
					</ul>
				</div>
				<aside>
					<p>
						Obviously, nobody can help you with the first item I mentioned &ndash; you'll need to do your 
						own optimization at some point; but Modernizr will help in the other areas. There is a bit of a 
						contradicting message. First, I'm telling you to have fewer HTTP requests by combining your 
						files, then I tell you to separate your files so they can be loaded only when needed. The truth 
						of the matter is that modern browsers can support more concurrent threads than legacy browsers. 
						What this means is that, if you separate your advanced features, only the users on modern 
						browsers will be subjected to the extra download, which their browser is likely optimized for. 
					</p>
					<p>
						With that said, there's a delicate balance here, and you're going to hate what I have to say 
						about it... you can't fix what you don't measure. Ringing any bells? No? What if I say, "if 
						you're not tracking metrics, shame on you!" You need to know your users and determine what the 
						most probable scenario is. Maybe all your users are running the latest version of Chrome. Maybe 
						they're all running IE6. Chances are, you're going to have a mixed bag. Luckily, Modernizr can 
						help you without the need to analyze every browser ever released to understand what features it 
						does or doesn't support. Instead, use feature detection and async, conditional resource loading 
						for separate, feature-based files and then analyze your server logs to discern how close the 
						numbers are between your feature-based and core files. The closer they are, the more likely you 
						should combine them. Obviously, this will take some work on your part, but it could improve 
						their experience a great deal, if performance is a concern.
					</p>
					<p>
						I've explained all this without even giving you the tagline... <code>Modernizr.load()</code> 
						uses yepnope.js, an asynchronous, conditional resource loader. Basically, you supply a Boolean 
						expression and it will load the desired resources (namely, script and CSS files). Enough talk, 
						an example will speak for itself...
					</p>
				</aside>
				<div class="slide">
<!-- <span class="slidenote" title="if you don't need Modernizr, grab yepnope.js and replace this with a call to yepnope()">Modernizr.load</span> -->
<pre class="brush:js">Modernizr.load({
	test: Modernizr.geolocation,
	yep : ['geo.js', 'geo.css'],
	nope: 'fallback.js'
});</pre>
				</div>
				<aside>
					<p>
						That's about it. Not much else to see here. There's more to it than just these three properties, 
						of course, but I'll leave the exercise of learning all the features to you. The one thing I will 
						mention again, however, is that the core library behind <code>Modernizr.load()</code> is 
						yepnope.js, which is available without Modernizr, so if you only need the async, conditional 
						loading, grab a copy and go to town.
					</p>
					<p>
						So, there's all your feature detection goodness. Grab the latest copy of Modernizr with 
						yepnope.js built-in and you'll be good to go! What more could you need? How about adding the 
						features that aren't supported by the browser?
					</p>
				</aside>
			</section>
			<section id="detect-fallback">
				<header><h1>Polyfills, shims, and fallbacks, oh my!</h1></header>
				<p>
					IE(6|7|8) + (polyfill || shim || fallback) == happ<b>IE</b>ness :-D
				</p>
				<aside>
					<p>
						They come by many names, but they all do the same thing: they add features that aren't there. 
						You may need web storage; <a href="http://gist.github.com/350433">there's a polyfill for that</a>. 
						Perhaps geolocation is your thing; <a href="https://gist.github.com/366184">there's a shim for that</a>. 
						Or, maybe you just need <code>&lt;video&gt;</code>; <a href="https://gist.github.com/366184">there's 
						even a fallback for that</a>.
					</p>
					<p>
						There's really not much else to say, except you'll need to dig in to each of these as I'm sure 
						they'll come with their own pros and cons. My advice is to consider them, but always ask 
						yourself what experience you want those less fortunate to have. Nobody knows your users better 
						than you &ndash; or, at least they shouldn't &ndash; so you should make an educated, measured 
						decision and then use analytics to check your assumptions and adjust, as needed.
					</p>
				</aside>
				<p>
					<a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills</a>
				</p>
			</section>
			<footer id="detect-footer">
				<h1>The more you know...</h1>
				<h2>Tools...</h2>
				<ul>
					<li><a href="http://modernizr.com">modernizr.com</a></li>
					<li><a href="http://yepnopejs.com">yepnopejs.com</a></li>
					<li>...both come with ASP.NET MVC3 (w/ HTML5 semantic markup)</li>
					<li>...or get them via NuGet</li>
				</ul>
				<h2>References...</h2>
				<ul>
					<li><a href="http://html5test.com">html5test.com</a></li>
					<li><a href="http://caniuse.com">caniuse.com</a></li>
					<li><a href="http://medialoot.com/blog/html5-compendium">medialoot.com/blog/html5-compendium</a></li>
					<li><a href="http://diveintohtml5.org/everything.html">diveintohtml5.org/everything.html</a> &ndash; list of manual feature detection methods</li>
					<li><a href="http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills">github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills</a></li>
				</ul>
				<h2>More...</h2>
				<ul>
					<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM04">Filling the HTML5 Gaps with Polyfills and Shims (Mix11)</a></li>
				</ul>
			</footer>
		</article>


		<article id="semantics">
			<header id="semantics-top">
				<h1>The Semantic Web is...</h1>
				<blockquote cite="http://www.scientificamerican.com/article.cfm?id=the-semantic-web">
					<p>
						The Semantic Web is not a separate Web but an extension of the current one, in which 
						information is given well-defined meaning, better enabling computers and people to work in 
						cooperation.
					</p>
					<div class="author">Tim Berners-Lee</div>
				</blockquote>
				<blockquote cite="http://w3.org/html/logo">
					<p>
						Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along 
						with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both 
						programs and your users.
					</p>
					<div class="author">W3C</div>
				</blockquote>
				<!-- TODO: Add talking points that cover Web 2.0 == Semantic Web and how meaning should be derived based on convention -->
				<!-- TODO: Should semantics be likened to Ruby's big "convention over configuration" mantra? -->
				<aside>
					<p>
						Just one more quick note before we move on: this section is organized by the sections in the 
						HTML5 specification. If you have any questions, they should be easy to lookup.
					</p>
				</aside>
			</header>
			<section id="semantics-new">
				<header><h1>We've got a lot to cover...</h1></header>
				<!-- TODO: Link each of these to their respective sub-sections -->
				<!-- TODO: Should hovering over an item offer an option to navigate to the parent section (e.g. Sections for <article>)? -->
				<!-- TODO: Format this list in a series of columns, based on the available page width -->
				<ul>
					<li><code>&lt;article&gt;</code></li>
					<li><code>&lt;aside&gt;</code></li>
					<li><code>&lt;audio&gt;</code></li>
					<li><code>&lt;canvas&gt;</code></li>
					<li><code>&lt;command&gt;</code></li>
					<li><code>&lt;datalist&gt;</code></li>
					<li><code>&lt;details&gt;</code></li>
					<li><code>&lt;embed&gt;</code></li>
					<li><code>&lt;figcaption&gt;</code></li>
					<li><code>&lt;figure&gt;</code></li>
					<li><code>&lt;footer&gt;</code></li>
					<li><code>&lt;header&gt;</code></li>
					<li><code>&lt;hgroup&gt;</code></li>
					<li><code>&lt;keygen&gt;</code></li>
					<li><code>&lt;mark&gt;</code></li>
					<li><code>&lt;meter&gt;</code></li>
					<li><code>&lt;nav&gt;</code></li>
					<li><code>&lt;output&gt;</code></li>
					<li><code>&lt;progress&gt;</code></li>
					<li><code>&lt;rp&gt;</code></li>
					<li><code>&lt;rt&gt;</code></li>
					<li><code>&lt;ruby&gt;</code></li>
					<li><code>&lt;section&gt;</code></li>
					<li><code>&lt;source&gt;</code></li>
					<li><code>&lt;summary&gt;</code></li>
					<li><code>&lt;time&gt;</code></li>
					<li><code>&lt;video&gt;</code></li>
					<li><code>&lt;wbr&gt;</code></li>
				</ul>
				<p>...and that's just the <em>new</em> tags!</p>
			</section>
			<section id="semantics-meta">
				<header><h1>Root, Document Metadata, and Scripting</h1></header>
				<div>
				<ul>
					<li><mark><code>&lt;!DOCTYPE&gt;</code></mark></li>
					<li><code>&lt;base&gt;</code></li>
					<li><code>&lt;head&gt;</code></li>
					<li><mark><code>&lt;html&gt;</code></mark></li>
					<li><mark><code>&lt;link&gt;</code></mark></li>
					<li><mark><code>&lt;meta&gt;</code></mark></li>
					<li><code>&lt;noscript&gt;</code></li>
					<li><mark><code>&lt;script&gt;</code></mark></li>
					<li><mark><code>&lt;style&gt;</code></mark></li>
					<li><code>&lt;title&gt;</code></li>
				</ul>
				<section id="semantics-meta-code">
					<header><h1>Before &amp; After</h1></header>
<code>
<del class="xml" title="no need for this, since we've opted for HTML">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</del><br/>
&lt;!DOCTYPE html <del title="let's just get rid of this behemoth">PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd"</del>&gt;<br/>
&lt;html <del class="xml" title="again, no need for this tidbit">xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"</del> lang="en"&gt;<br/>
&lt;head&gt;<br/>
&nbsp; &nbsp; &lt;meta <del title="since 'text/html' is the default, we can get rid of this">http-equiv="../content-Type" content="text/html;</del> charset=<ins title="let's just add a missing quote -- due to the fallibility of HTML (namely, forgetting quotes), browsers already support charset as its own attribute">"</ins>utf-8" /&gt;<br/>
&nbsp; &nbsp; &lt;title&gt;...&lt;/title&gt;<br/>
&nbsp; &nbsp; &lt;link href="/css/main.css" <del title="'text/css' is the default for a link with the relationship of 'stylesheet', so we're good here">type="text/css"</del> rel="stylesheet" /&gt;<br/>
&nbsp; &nbsp; &lt;link href="/css/print.css" <del title="same thing: link rel='stylesheet'">type="text/css"</del> rel="stylesheet" media="print" /&gt;<br/>
&nbsp; &nbsp; &lt;link href="/favicon.ico" rel="shortcut icon" /&gt;<br/>
&nbsp; &nbsp; &lt;style <del title="just like link, the style element has a default type of 'text/css'">type="text/css"</del> media="screen"&gt;<br/>
&nbsp; &nbsp; &nbsp; &nbsp; .warning { color: red }<br/>
&nbsp; &nbsp; &lt;/style&gt;<br/>
&lt;/head&gt;<br/>
&lt;body&gt;<br/>
&nbsp; &nbsp; ...<br/>
&nbsp; &nbsp; &lt;<span class="slidenote" title="if you didn't know, make sure you put your scripts at the bottom of the page to ensure they don't block the actual content of your pages from loading -- it's about perceived performance">script</span> src="/js/main.js" 
<del title="the 'language' attribute is non-conforming, but will be used if 'type' is not present, in which case it is prefixed by 'text/'">language="javascript"</del>
<del title="as I'm sure you can guess by now, scripts default to JavaScript">type="text/javascript"</del>/&gt;<br/>
&lt;/body&gt;<br/>
&lt;/html&gt;
</code>
<!--
					<div class="before">
<pre class="brush:xml"><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="../content-Type" content="text/html; charset=utf-8" />
	<title>...</title>
	<link href="/css/main.css" type="text/css" rel="stylesheet" />
	<link href="/css/print.css" type="text/css" rel="stylesheet" media="print" />
	<link href="/favicon.ico" rel="shortcut icon" />
	<style type="text/css" media="screen">
		.warning { color: red }
	</style>
</head>
<body>
	...
	<script src="/js/main.js" language="javascript" type="text/javascript"></script>
</body>
</html></pre>
					</div>
					<div class="after">
<pre class="brush:xml">
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="../content-Type" content="text/html; charset=utf-8" />
	<title>...</title>
	<link href="/css/main.css" rel="stylesheet" />
	<link href="/css/print.css" rel="stylesheet" media="print" />
	<link href="/favicon.ico" rel="shortcut icon" />
	<style media="screen">
		.warning { color: red }
	</style>
</head>
<body>
	...
	<script src="/js/main.js"></script>
</body>
</html></pre>
					</div>
-->
					<!-- TODO: Add talking points to cover the removal of the XML parts and the simplification of the doctype -->
					<div>
						<ul>
							<li><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;</code></li>
							<li><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;</code></li>
							<li><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&gt;</code></li>
							<li><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</code></li>
							<li><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;</code></li>
							<li><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;</code></li>
						</ul>
						<p>
							Or...
						</p>
						<code>&lt;!DOCTYPE html&gt;</code>
						<p>Seriously, which one are you more likely to remember?</p>
					</div>
					<!-- TODO: Continue talking points to cover the default document content type, promoted charset attribute, and default link@rel=stylesheet/style type values -->
				</section>
				<section id="semantics-meta-rel">
					<header><h1>Yes, I did have relations with that web page</h1></header>
					<p>Link relationsihps apply to <code>&lt;a&gt;</code>, <code>&lt;area&gt;</code>, and <code>&lt;link&gt;</code></p>
					<ul>
						<li><code>alternate</code></li>
						<li><code>archives</code></li>
						<li><code>author</code></li>
						<li><code>bookmark</code> (not supported by <code>&lt;link&gt;</code>)</li>
						<li><code>external</code> (not supported by <code>&lt;link&gt;</code>)</li>
						<li><code>help</code></li>
						<li><code>icon</code> (+ <code>sizes</code> attribute) (not supported by <code>&lt;a&gt;</code>/<code>&lt;area&gt;</code>)</li>
						<li><code>license</code></li>
						<li><code>next</code></li>
						<li><code>nofollow</code> (not supported by <code>&lt;link&gt;</code>)</li>
						<li><code>noreferrer</code> (not supported by <code>&lt;link&gt;</code>)</li>
						<li><code>pingback</code> (not supported by <code>&lt;a&gt;</code>/<code>&lt;area&gt;</code>)</li>
						<li><code>prefetch</code></li>
						<li><code>prev</code></li>
						<li><code>search</code></li>
						<li><code>sidebar</code></li>
						<li><code>stylesheet</code> (not supported by <code>&lt;a&gt;</code>/<code>&lt;area&gt;</code>)</li>
						<li><code>tag</code></li>
					</ul>
				</section>
				</div>
			</section>
			<section id="semantics-section">
				<header><h1>Sections</h1></header>
				<div>
					<ul>
						<li><code>&lt;address&gt;</code></li>
						<li><ins><span class="slidenote" title="think: repeated content, like what you might create an Atom/RSS feed for"><code>&lt;article&gt;</code></span></ins></li>
						<li><ins><code>&lt;aside&gt;</code></ins></li>
						<li><code>&lt;body&gt;</code></li>
						<li><ins><code>&lt;footer&gt;</code></ins></li>
						<li><mark><code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code></mark></li>
						<li><ins><code>&lt;header&gt;</code></ins></li>
						<li><ins><code>&lt;hgroup&gt;</code></ins></li>
						<li><ins><code>&lt;nav&gt;</code></ins></li>
						<li><ins><code>&lt;section&gt;</code></ins></li>
					</ul>
				<section id="semantics-section-ie">
					<header><h1>One Caveat: IE</h1></header>
					<aside>
						<p>
							Before we get into the meat of the conversation, we need to cover a little problem with 
							older versions of IE &ndash; not just IE6, but 7 and 8, too. One important part of HTML5 is 
							the new semantic markup we're about to dig into. Sadly, pre-IE9 versions of the browser 
							neither style block-level elements correctly nor do they let you style them yourselves. This 
							means, if you add a <code>&lt;section&gt;</code> to a page and try to give it some padding, 
							the padding won't be applied. Kinda kills the mood, if you ask me. Luckily, all those legacy 
							versions of IE also have a workaround to the issue.
						</p>
					</aside>
					<p>Don't understand HTML5 semantic markup? No problem!</p>
					<code>document.createElement('awesome');</code>
					<p class="js ielt9">
						<style>
							.awesomizer       { background-color:#00f; color:#f00; padding:0    .5em; text-transform:lowercase; font-weight:bold; }
							.awesomizer:hover { background-color:#f00; color:#00f; padding:.5em .5em; text-transform:uppercase; display:block; font-size:32pt; text-align:center; }
						</style>
						<script>document.createElement('awesome');</script>
						What? You didn't believe me? Isn't this <span class="slidenote" title="this is an 'awesome' tag with a CSS class to style it... awesome, right?">[awesome]<awesome class="awesomizer">awesome</awesome>[/awesome]</span>!? 
						It's better than being <span class="slidenote" title="this is a 'notsoawesome' tag, which the workaround hasn't been applied to, but has the same CSS class... fail!">[notsoawesome]<notsoawesome class="awesomizer">not so awesome</notsoawesome>[/notsoawesome]</span> :'(
					</p>
					<p class="no-js">Maybe if you had JavaScript enabled, you could see how awesome that really was... awwwe :-(</p>
					<p class="js no-ielt9">I'd prove it to you, but your browser doesn't have this limitation; try using IE with either the IE7 or IE8 browser mode</p>
					<aside>
						<p>
							For the record, there is no <code>&lt;awesome&gt;</code> element in HTML5. I was simply proving 
							a point. But there is plenty of awesomeness!
						</p>
						<p>
							Speaking of awesomeness, you don't even need to worry about all this. Why? Because you 
							already grabbed a copy of Modernizr. You remember Modernizr, right? That feature detection 
							library we talked about not too long ago? Well, if you're still a little hesitant about it, 
							I'll give you another option: html5shim &ndash; also known as html5shiv. This small library 
							will enable styling for the new tags, but skip the feature detection, if you don't need 
							that, yet. Whichever route you take, you should be set and, now that we've been able to 
							"fix" all those old browsers out there, let's see what we can do with these shiny new tags!
						</p>
					</aside>
				</section>
				<section id="semantics-section-code">
					<header><h1>Before &amp; After</h1></header>
					<!-- TODO: Add talking points to cover how these new tags were created based on a deep analysis of the web -->
					<!-- TODO: Link to Google stats on what the most popular CSS class names are @ code.google.com/webstats -->
					<div class="container clearfix">
						<div><code>&lt;<del>div id="</del>header<del>"</del>&gt;</code></div>
						<div><code>&lt;<del>div id="</del>nav<del>"</del>&gt;</code></div>
						<div class="article">
							<code>&lt;<del>div id="</del>article<del>"</del>&gt;</code>
							<div><code>&lt;<del>div id="</del>section<del>"</del>&gt;</code></div>
						</div>
						<div class="sidebar"><code><del>&lt;div id="sidebar"&gt;</del><br/><ins>&lt;aside&gt;</ins></code></div>
						<div><code>&lt;<del>div id="</del>footer<del>"</del>&gt;</code></div>
					</div>
					<!-- TODO: Add note about how sections are hierarchical -->
				</section>
				<section id="semantics-section-head">
					<header><h1>A quick note about headings</h1></header>
					<p>Heading tags (<code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code>) imply structure</p>
					<p>In HTML4...</p>
					<code>
						&lt;h1&gt;Page Title&lt;h1&gt;<br/>
						&lt;h2&gt;Section A&lt;h2&gt;<br/>
						&lt;h3&gt;Sub-Section A1&lt;h3&gt;<br/>
						&lt;h3&gt;Sub-Section A2&lt;h3&gt;<br/>
						&lt;h2&gt;Section B&lt;h2&gt;<br/>
					</code>
					<p>Equates to...</p>
					<ul>
						<li>Page Title
							<ul>
								<li>Section A
									<ul>
										<li>Sub-Section A1</li>
										<li>Sub-Section A2</li>
									</ul>
								</li>
								<li>Section B</li>
							</ul>
						</li>
					</ul>
					<p>How do you create a sub-heading for the page title?</p>
					<p>HTML5 uses scope as a convention</p>
					<p>Here's the same outline, but in HTML5...</p>
					<code>
						&lt;header&gt;&lt;h1&gt;Page Title&lt;h1&gt;&lt;/header&gt;<br/>
						&lt;section&gt;<br/>
						&nbsp; &nbsp; &lt;h1&gt;Section A&lt;h1&gt;<br/>
						&nbsp; &nbsp; &lt;section&gt;<br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Sub-Section A1&lt;h1&gt;<br/>
						&nbsp; &nbsp; &lt;/section&gt;<br/>
						&nbsp; &nbsp; &lt;section&gt;<br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Sub-Section A2&lt;h1&gt;<br/>
						&nbsp; &nbsp; &lt;/section&gt;<br/>
						&lt;/section&gt;<br/>
						&lt;section&gt;<br/>
						&nbsp; &nbsp; &lt;h1&gt;Section B&lt;h1&gt;<br/>
						&lt;/section&gt;
					</code>
				</section>
				</div>
			</section>
			<section id="semantics-group">
				<header><h1>Grouping Content</h1></header>
				<div>
				<ul>
					<li><code>&lt;blockquote&gt;</code></li>
					<li><code>&lt;dd&gt;</code></li>
					<li><code>&lt;dl&gt;</code></li>
					<li><code>&lt;dt&gt;</code></li>
					<li><del><code>&lt;dir&gt;</code></del></li>
					<li><code>&lt;div&gt;</code></li>
					<li><ins><code>&lt;figcaption&gt;</code></ins></li>
					<li><ins><code>&lt;figure&gt;</code></ins></li>
					<li><mark><code>&lt;hr&gt;</code></mark></li>
					<li><mark><code>&lt;li&gt;</code></mark></li>
					<li><mark><code>&lt;ol&gt;</code></mark></li>
					<li><code>&lt;p&gt;</code></li>
					<li><code>&lt;pre&gt;</code></li>
					<li><code>&lt;ul&gt;</code></li>
				</ul>
				<aside>
					<p>
						Not a whole lot going on here. There are only really 3 topics to bring up. First, the 
						horizontal rule, (<code>&lt;hr&gt;</code>) should <em>only</em> be used to break paragraphs 
						of text &ndash; virtually separating the different paragraphs into logical groups. 
						<strong>Do not</strong> use <code>&lt;hr&gt;</code> to add a line for aesthetics. There are 
						more semantically appropriate ways to accomplish that &ndash; namely, using CSS to add 
						borders to existing elements. If you don't have one that you can repurpose for your 
						aesthetics, feel free to throw in a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code>; 
						but try to use existing elements to keep your markup concise.
					</p>
					<p>
						Next up are a few changes to <code>&lt;ol&gt;</code> and <code>&lt;li&gt;</code>. Now, you can 
						set the starting point for any ordered list: <code>&lt;ol start="5"&gt;</code>. Nothing 
						revolutionary, but expect to see a lot of catch-up as web standards reach for parity with 
						productivity tools like Microsoft Office. As for <code>&lt;li&gt;</code>, we now have a 
						<code>value</code> attribute. We'll cover the purpose of this attribute in the 
						<a href="#semantics-forms">Forms section</a> below, but I wanted to at least call it out, here.
					</p>
					<p>
						The last topic I want to mention is <code>&lt;figure&gt;</code> and 
						<code>&lt;figcaption&gt;</code>, which are pretty self-explanatory, as far as purpose goes, and 
						trivial to impelment. I'll let the code do the talking and we can move on to the next section.
					</p>
				</aside>
				<code>
					&lt;figure&gt;<br/>
					&nbsp; &nbsp; &lt;img src="awesomeness.jpg" alt="Complete awesomeness"/&gt;<br/>
					&nbsp; &nbsp; &lt;figcaption&gt;Figure 1. The Most Awesomest Photo&lt;/figcaption&gt;<br/>
					&lt;/figure&gt;
				</code>
				<aside>
					<p>
						Okay, I lied. There's one more point I need to make: <code>&lt;figure&gt;</code> isn't just for 
						images. You can also use it for things like code listings or tables &ndash; as in, tabular data. 
					</p>
				</aside>
				<code>
					&lt;figure&gt;<br/>
					&nbsp; &nbsp; &lt;figcaption&gt;Listing 1. The Code for the Most Awesomest Photo&lt;/figcaption&gt;<br/>
					&nbsp; &nbsp; &amp;lt;figure&amp;gt;<br/>
					&nbsp; &nbsp; &nbsp; &nbsp; &amp;lt;img src="awesomeness.jpg" alt="Complete awesomeness"/&amp;gt;<br/>
					&nbsp; &nbsp; &nbsp; &nbsp; &amp;lt;figcaption&amp;gt;Figure 1. The Most Awesomest Photo&amp;lt;/figcaption&amp;gt;<br/>
					&nbsp; &nbsp; &amp;lt;/figure&amp;gt;<br/>
					&lt;/figure&gt;
				</code>
				</div>
			</section>
			<section id="semantics-text">
				<header><h1>Text-Level Semantics and Edits</h1></header>
				<div>
					<ul>
						<li><mark><code>&lt;a&gt;</code></mark></li>
						<li><code>&lt;abbr&gt;</code></li>
						<li><del><code>&lt;acronym&gt;</code></del></li>
						<li><mark><code>&lt;b&gt;</code></mark></li>
						<li><del><code>&lt;basefont&gt;</code></del></li>
						<li><code>&lt;bdi&gt;</code></li>
						<li><code>&lt;bdo&gt;</code></li>
						<li><del><code>&lt;big&gt;</code></del></li>
						<li><code>&lt;br&gt;</code></li>
						<li><del><code>&lt;center&gt;</code></del></li>
						<li><code>&lt;cite&gt;</code></li>
						<li><code>&lt;code&gt;</code></li>
						<li><code>&lt;del&gt;</code></li>
						<li><code>&lt;dfn&gt;</code></li>
						<li><mark><code>&lt;em&gt;</code></mark></li>
						<li><del><code>&lt;font&gt;</code></del></li>
						<li><mark><code>&lt;i&gt;</code></mark></li>
						<li><code>&lt;ins&gt;</code></li>
						<li><code>&lt;kbd&gt;</code></li>
						<li><ins><code>&lt;mark&gt;</code></ins></li>
						<li><code>&lt;q&gt;</code></li>
						<li><ins><code>&lt;rp&gt;</code></ins></li>
						<li><ins><code>&lt;rt&gt;</code></ins></li>
						<li><ins><code>&lt;ruby&gt;</code></ins></li>
						<li><code>&lt;s&gt;</code></li>
						<li><code>&lt;samp&gt;</code></li>
						<li><code>&lt;small&gt;</code></li>
						<li><code>&lt;span&gt;</code></li>
						<li><del><code>&lt;strike&gt;</code></del></li>
						<li><mark><code>&lt;strong&gt;</code></mark></li>
						<li><code>&lt;sub&gt;</code></li>
						<li><code>&lt;sup&gt;</code></li>
						<li><ins><code>&lt;time&gt;</code></ins></li>
						<li><del><code>&lt;tt&gt;</code></del></li>
						<li><del><code>&lt;u&gt;</code></del></li>
						<li><code>&lt;var&gt;</code></li>
						<li><ins><code>&lt;wbr&gt;</code></ins></li>
						<li><del><code>&lt;xmp&gt;</code></del></li>
					</ul>
				<section id="semantics-text-edit">
					<header><h1>Editing text</h1></header>
					<p>Editing via <code>contenteditable</code> attribute</p>
					<p>Check spelling via <code>spellcheck</code> attribute</p>
				</section>
				<section id="semantics-text-semantics">
					<header><h1>The battle for semantics</h1></header>
					<!-- TODO: Should these all be mentioned on one page or separately? -->
					<!-- TODO: Add talking points to each bullet 
						- em vs. i
							- Use em when it's about an emphasis (e.g. "I didn't say I knew, I said I thought I was right")
							- Use i when it's about italics (e.g. technical term, idiomatic phrase from another language, taxonomic designation, thought, ship name, anything italicized in print)
						- strong vs. b
							- Use strong when it's about importance, but doesn't change the meaning like an emphasis would -- nest to indicate stronger importance (e.g. "Warning - may spontaneously combust! Handle with care.")
							- Use b when it's about stylistically setting something apart and not about importance (e.g. "Press Ctrl+C to copy")
						- small -- not about visually smaller text; think less important (e.g. disclaimer, caveat, copyright, legal restrictions, attribution)
						- br -- use for semantic, not visual line breaks (e.g. lines in a poem)
						- hr -- paragraph-level thematic break, like in a story -- is <section> better?
					-->
					<ul>
						<li><code>&lt;b&gt;</code> vs. <code>&lt;strong&gt;</code></li>
						<li><code>&lt;i&gt;</code> vs. <code>&lt;em&gt;</code></li>
						<li><code>&lt;u&gt;</code> vs. CSS</li>
						<li>When to use <code>&lt;small&gt;</code></li>
						<li>When to use <code>&lt;br&gt;</code></li>
						<li>When to use <code>&lt;hr&gt;</code></li>
						<li>When to use <code>&lt;mark&gt;</code></li>
						<li>When to use <code>&lt;ins&gt;</code></li>
						<li><code>&lt;s&gt;</code> vs. <code>&lt;del&gt;</code></li>
					</ul>
					<aside>
						<p>Here's a good, brief list of examples on how and when to use each of the text markup tags.</p>
					</aside>
					<!-- TODO: Include something similar to this as a reference page/slide - should it be in the appendix? -->
					<p><a href="http://developers.whatwg.org/text-level-semantics.html#usage-summary">developers.whatwg.org/text-level-semantics.html#usage-summary</a></p>
				</section>
				<!-- TODO: Should we sum up all this "semantic" talk in a footer? -->
				</div>
			</section>
			<section id="semantics-embed">
				<header><h1>Embedded Content</h1></header>
				<div>
				<ul>
					<li><del><code>&lt;applet&gt;</code></del></li>
					<li><code>&lt;area&gt;</code></li>
					<li><ins><code>&lt;audio&gt;</code></ins></li>
					<li><ins><code>&lt;canvas&gt;</code></ins></li>
					<li><ins><code>&lt;embed&gt;</code></ins></li>
					<li><del><code>&lt;frame&gt;</code></del></li>
					<li><del><code>&lt;frameset&gt;</code></del></li>
					<li><mark><code>&lt;iframe&gt;</code></mark></li>
					<li><code>&lt;img&gt;</code></li>
					<li><code>&lt;map&gt;</code></li>
					<li><del><code>&lt;noframes&gt;</code></del></li>
					<li><code>&lt;object&gt;</code></li>
					<li><code>&lt;param&gt;</code></li>
					<li><ins><code>&lt;source&gt;</code></ins></li>
					<li><ins><code>&lt;svg&gt;</code></ins></li>
					<li><ins><code>&lt;track&gt;</code></ins></li>
					<li><ins><code>&lt;video&gt;</code></ins></li>
				</ul>
				<aside>
					<p>
						We're going to cover most of this in later sections. The only thing we'll cover right now is a 
						new security feature added to <code>&lt;iframe&gt;</code>...
					</p>
				</aside>
				<section id="semantics-embed-sandbox">
					<header><h1>Sandbox</h1></header>
					<div>
					<p>Applies security restrictions to <code>&lt;iframe&gt;</code> elements</p>
					<code>&lt;iframe src="untrusted.html" sandbox="sandbox"/&gt;</code>
					<ul>
						<li>Disable plugins</li>
						<li>Block script execution (<code>allow-scripts</code>)</li>
						<li>Block form submission (<code>allow-forms</code>)</li>
						<li>Restrict <span class="slidenote" title="e.g. Local Storage, XMLHttpRequest, and DOM access">APIs which require same-origin</span> (<code>allow-same-origin</code>)</li>
						<li>Block external link targets (<code>allow-top-navigation</code>)</li>
						<li>Block popup windows (<code>ms-allow-popups</code>)</li>
					</ul>
					<p>Can also lift some restrictions</p>
					<code>&lt;iframe src="untrusted.html" sandbox="allow-scripts allow-forms"/&gt;</code>
					</div>
				</section>
				</div>
			</section>
			<section id="semantics-table">
				<header><h1>Tabular Data</h1></header>
				<ul>
					<li><code>&lt;caption&gt;</code></li>
					<li><code>&lt;col&gt;</code></li>
					<li><code>&lt;colgroup&gt;</code></li>
					<li><code>&lt;table&gt;</code></li>
					<li><code>&lt;tbody&gt;</code></li>
					<li><code>&lt;td&gt;</code></li>
					<li><code>&lt;tfoot&gt;</code></li>
					<li><code>&lt;th&gt;</code></li>
					<li><code>&lt;thead&gt;</code></li>
					<li><code>&lt;tr&gt;</code></li>
				</ul>
				<aside>
					<p>
						Nothing new, nothing deprecated. The only real comment I have is that I want to call out the 
						name of this (and the parent) section. Notice that the <code>&lt;table&gt;</code> element is in 
						the "Tabular Data" section of the HTML5 spec. If you're confused why I would mention this, note 
						that it's not in the "Table-based Layout" section (because there is none). We're talking 
						semantics here and, semantically, a table is for tabular data, not visually organizing borders 
						and background images. This is also applicable to accessibility; however, you could say the 
						entire semantic movement is one that will greatly advance accessibility, since it'll make 
						parsing and understanding the true meaning of HTML/XHTML content that much simpler.
					</p>
				</aside>
			</section>
			<section id="semantics-forms">
				<header>
					<h1>Forms</h1>
					<aside>
						<p>
							While it may not look like it, we have quite a bit to talk about here, so let's get to it!
						</p>
					</aside>
				</header>
				<div>
					<ul>
						<li><code>&lt;button&gt;</code></li>
						<li><ins><code>&lt;datalist&gt;</code></ins></li>
						<li><code>&lt;fieldset&gt;</code></li>
						<li><code>&lt;form&gt;</code></li>
						<li><mark><code>&lt;input&gt;</code></mark></li>
						<li><ins><code>&lt;keygen&gt;</code></ins></li>
						<li><code>&lt;label&gt;</code></li>
						<li><code>&lt;legend&gt;</code></li>
						<li><ins><code>&lt;meter&gt;</code></ins></li>
						<li><code>&lt;optgroup&gt;</code></li>
						<li><code>&lt;option&gt;</code></li>
						<li><ins><code>&lt;output&gt;</code></ins></li>
						<li><ins><code>&lt;progress&gt;</code></ins></li>
						<li><code>&lt;select&gt;</code></li>
						<li><code>&lt;textarea&gt;</code></li>
					</ul>
				<section id="semantics-forms-inputtypes">
					<header><h1>New &lt;input&gt; Types</h1></header>

                    <div class="right">
						<figure class="figureStack">
							<figcaption>color picker in Opera</figcaption>
							<img src="../content/images/semantics-forms-inputtypes-color-opera.png" alt="color picker in Opera"/>
						</figure>
						<figure class="figureStack">
							<figcaption>week picker Opera</figcaption>
							<img src="../content/images/week.png" alt="week picker Opera"/>
						</figure>
						<figure class="figureStack">
							<figcaption>number spinner in Chrome</figcaption>
							<img src="../content/images/number.png" alt="number spinner in Chrome"/>
						</figure>
						<figure class="figureStack">
							<figcaption>range slider in Chrome</figcaption>
							<img src="../content/images/range.png" alt="range slider in Chrome"/>
						</figure>
						<figure class="figureStack">
							<figcaption>search boxes in OSX and Chrome</figcaption>
							<img src="../content/images/search-osx.png" alt="search box in OSX"/>
							<img src="../content/images/search-chrome.png"  alt="search box in Chrome"/>
						</figure>
                    </div>
 					<aside>
						<p>
							There are 13 new input types available in HTML5, bringing the count up to 23. These new 
							input types address common scenarios that were previously handled with JavaScript, such as 
							displaying a calendar date picker.
						</p>
					</aside>
					<ul>
						<li><code>button</code></li>
						<li><code>checkbox</code></li>
						<li><ins><code class="slidenote" title="shows color picker, RGB value in hex - differs by browser">color</code></ins></li>
						<li><ins><code class="slidenote" title="shows date picker (calendar)">date</code></ins></li>
						<li><ins><code class="slidenote" title="shows date and time pickers (calendar and clock)">datetime</code></ins></li>
						<li><ins><code class="slidenote" title="same as 'datetime', but in local time zone">datetime-local</code></ins></li>
						<li><ins><code class="slidenote" title="validates email address, tells virtual keyboards to use email-input mode">email</code></ins></li>
						<li><code>file</code></li>
						<li><code>hidden</code></li>
						<li><code>image</code></li>
						<!-- TODO: Validate what is shown in all major browsers -->
						<li><ins><code class="slidenote" title="shows month picker - some use calendar, others use drop-down">month</code></ins></li>
						<li><ins><code class="slidenote" title="shows numeric up/down spinner, validates numbers, tells virtual keyboards to use numeric-input mode">number</code></ins> (w/ <code>min</code>, <code>max</code>, and <code>step</code> attributes)</li>
						<li><code>password</code></li>
						<li><code>radio</code></li>
						<li><ins><code class="slidenote" title="shows range slider">range</code></ins> (w/ <code>min</code>, <code>max</code>, and <code>step</code> attributes)</li>
						<li><code>reset</code></li>
						<li><ins><code class="slidenote" title="shows textbox targeted at search">search</code></ins></li>
						<li><code>submit</code></li>
						<li><ins><code class="slidenote" title="validates phone number, tells virtual keyboards to use phone-input mode">tel</code></ins></li>
						<li><code>text</code></li>
						<li><ins><code class="slidenote" title="shows time picker (clock)">time</code></ins></li>
						<li><ins><code class="slidenote" title="validates URL, tells virtual keyboard to use URL-input mode">url</code></ins></li>
						<!-- TODO: Validate what is shown in all major browsers -->
						<li><ins><code class="slidenote" title="shows week picker (calendar)">week</code></ins></li>
					</ul>
					<aside>
						<p>
							We interact with our browsers in different ways and, in some cases, the semantics provided 
							by the <code>&lt;input&gt;</code> type allows platforms to exploit contextual 
							representations, offering a more compelling experience than can be provided with JavaScript 
							alone. One example is with virutal keyboards on touch screen devices.
						</p>
					</aside>
					<figure class="center">
						<figcaption>iPhone virtual keyboard input modes</figcaption>
						<img class="iphoneShots" src="../content/images/semantics-forms-inputtypes-email-iphone.png" alt="iPhone virtual keyboard in email-input mode" />
						<img class="iphoneShots" src="../content/images/semantics-forms-inputtypes-number-iphone.png" alt="iPhone virtual keyboard in numeric-input mode" />
						<img class="iphoneShots" src="../content/images/semantics-forms-inputtypes-url-iphone.png" alt="iPhone virtual keyboard in URL-input mode" />
					</figure>
					<code>if (Modernizr.inputtypes.<span class="slidenote" title="replace this with any of the new type values, except 'datetime-local', to check for support">email</span>) { ... }</code>
					<code>if (Modernizr.inputtypes<span class="slidenote" title="because 'datetime-local' has a dash, we need to access the object as a dictionary">['datetime-local']</span>) { ... }</code>
					<!-- TODO: Add information about the new object properties/methods -->
					<!-- TODO: Find fallbacks for each -->
				</section>
				<section id="semantics-forms-datalist">
					<header><h1>&lt;datalist&gt;</h1></header>
					<p>List of options for an <code>&lt;input&gt;</code> element &ndash; think <span class="slidenote" title="...albeit a hacky one">combobox</span></p>
					<code>
						&lt;label for="awesomeness"&gt;What is the most awesomest HTML5 training resource?&lt;/label&gt;<br/>
						&lt;input name="awesomeness" list="html5-training"/&gt;<br/>
						&lt;datalist id="html5-training"&gt;<br/>
						&nbsp; &nbsp; &lt;option value="HTML5 Today" /&gt;<br/>
						&nbsp; &nbsp; &lt;option value="W3C" /&gt;<br/>
						&nbsp; &nbsp; &lt;option value="WHATWG" /&gt;<br/>
						&lt;/datalist&gt;<br/>
					</code>
					<!-- TODO: Find fallback -->
				</section>
				<section id="semantics-forms-keygen">
					<header><h1>&lt;keygen&gt;</h1></header>
					<p>Secure way to authenticate users</p>
					<p>Stores private key in local (client) keystore; public key is sent to server</p>
					<code>&lt;label for="key"&gt;Encryption:&lt;/label&gt; &lt;keygen name="key"/&gt;</code>
					<!-- TODO: Find fallback -->
				</section>
				<section id="semantics-forms-output">
					<header><h1>&lt;output&gt;</h1></header>
					<p>Result of some calculation</p>
					<code>
						&lt;input id="base" type="number"/&gt; ^ &lt;input id="exp" type="number"/&gt; = <br/>
						&lt;output onforminput="this.value = Math.pow(Number(base.value), Number(exp.value))"/&gt;
					</code>
					<p>...but it's not just for direct output</p>
					<!-- TODO: Find fallback -->
				</section>
				<section id="semantics-forms-meter">
					<header><h1>&lt;meter&gt; and &lt;progress&gt;</h1></header>
					<p>The same, but different</p>
					<p>Both show status within a known numeric range</p>
					<code>
						&lt;meter min="1" low="2" value="3" high="4" max="5"&gt;<span class="slidenote" title="this is fallback content">60%</span>&lt;/progress&gt;
						&lt;progress value="3" max="10"&gt;<span class="slidenote" title="this is fallback content">30%</span>&lt;/progress&gt;
					</code>
					<p><em>Always</em> show progress with <code>&lt;progress&gt;</code></p>
					<!-- TODO: Find fallbacks for each -->
				</section>
				<section id="semantics-forms-attributes">
					<header><h1>New Form Attributes</h1></header>
					<!-- TODO: Determine if this works on any of the other elements (e.g. keygen) - probably not on the others -->
					<p>New attributes for <code>&lt;input&gt;</code>, <code>&lt;select&gt;</code>, and <code>&lt;textarea&gt;</code></p>
					<ul>
						<li><code>aria-required</code></li>
						<li><code>autocomplete</code></li>
						<li><code>autofocus</code></li>
						<li><code>form</code></li>
						<li><code>formaction</code></li>
						<li><code>formenctype</code></li>
						<li><code>formmethod</code></li>
						<li><code>formnovalidate</code></li>
						<li><code>formtarget</code></li>
						<li><code>list</code></li>
						<li><code>max</code></li>
						<li><code>min</code></li>
						<li><code>multiple</code></li>
						<li><code>pattern</code></li>
						<li><code>placeholder</code></li>
						<li><code>readonly</code></li>
						<li><code>required</code></li>
						<li><code>step</code></li>
					</ul>
					<p>Don't forget about the matching CSS selectors</p>
					<ul>
						<li><code>:valid</code> / <code>:invalid</code></li>
						<li><code>:required</code> / <code>:optional</code></li>
						<li><code>:in-range</code> / <code>:out-of-range</code></li>
						<li><code>:read-only</code> / <code>:read-write</code></li>
					</ul>
					<!-- TODO: Find fallbacks for each -->
				</section>
				</div>
			</section>
			<section id="semantics-interact">
				<header>
					<h1>Interactive Elements</h1>
				</header>
				<div>
					<ul>
						<li><ins><code>&lt;details&gt;</code></ins></li>
						<li><ins><code>&lt;command&gt;</code></ins></li>
						<li><code>&lt;menu&gt;</code></li>
						<li><ins><code>&lt;summary&gt;</code></ins></li>
					</ul>
				<section id="semantics-interact-details">
					<header><h1>&lt;details&gt; and &lt;summary&gt;</h1></header>
					<p>Contextual information about the parent element</p>
					<code>
						&lt;details <span class="slidenote" title="hidden by default">open="true"</span>&gt;<br/>
						&nbsp; &nbsp; &lt;summary&gt;...&lt;/summary&gt;<br/>
						&nbsp; &nbsp; ...<br/>
						&lt;/details&gt;
					</code>
				</section>
				<section id="semantics-interact-menu">
					<header><h1>&lt;menu&gt; and &lt;command&gt;</h1></header>
					<p>Context menu, toolbar, or general list of commands</p>
					<!-- TODO: Change this code block to use media queries and align the text properly based on the available screen width instead of forcing a skinny column -->
					<code>
						&lt;menu type="context"&gt;<br/>
						&nbsp; &nbsp; &lt;menu label="File"&gt;<br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;command type="command" <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accesskey="n" label="New..." <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon="/img/new.png" onclick="/new"/&gt;<br />
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;command type="command" <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accesskey="s" label="Save" <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon="/img/save.png" onclick="..."/&gt;<br />
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;hr/&gt;<br />
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;command type="checkbox" label="Read Only" <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon="/img/locked.png" onclick="..."/&gt;<br />
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;hr/&gt;<br />
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;command type="command" <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accesskey="p" label="Print..." <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon="/img/print.png" onclick="..."/&gt;<br />
						&nbsp; &nbsp; &lt;/menu&gt;<br/>
						&nbsp; &nbsp; &lt;menu label="View"&gt;<br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;command type="radio" radiogroup="view-mode" <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accesskey="b" label="Basic" <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon="/img/basic.png" onclick="..."/&gt;<br />
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;command type="radio" radiogroup="view-mode" <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accesskey="a" label="Advanced" <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon="/img/advanced.png" onclick="..."/&gt;<br />
						&nbsp; &nbsp; &lt;/menu&gt;<br/>
						&nbsp; &nbsp; &lt;menu label="Help"&gt;<br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;command type="command" <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; accesskey="a" label="About" <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon="/img/about.png" onclick="/about"/&gt;<br />
						&nbsp; &nbsp; &lt;/menu&gt;<br/>
						&lt;/menu&gt;
					</code>
					<p>In a menu, <code>&lt;command&gt;</code> is an abstract concept &ndash; <code>&lt;li&gt;</code> and other form elements can be used in its place</p>
					<p>Can also use <code>&lt;command&gt;</code> on its own to indicate a keyboard shortcut</p>
				</section>
				</div>
			</section>
			<section id="semantics-link">
				<!-- TODO: What's the difference between this section and the <a> and <area> in the text/embed sections above? -->
				<!-- TODO: Is there anything special to talk about here? If not, should the tags be marked as updated? -->
				<header><h1>Linking Elements</h1></header>
				<ul>
					<li><mark><code>&lt;a&gt;</code></mark></li>
					<li><mark><code>&lt;area&gt;</code></mark></li>
				</ul>
				<p>Same relationship semantics apply as with <code>&lt;link&gt;</code></p>
				<p>No longer limited to inline elements</p>
			</section>
			<section id="semantics-drag">
				<header><h1>Drag & Drop</h1></header>
				<p>Activated via the <code>draggable</code> attribute</p>
				<p>Handle <code>dragenter</code>, <code>dragover</code>, and <code>drop</code> events</p>
			</section>
			<section id="semantics-extend">
				<!-- TODO: I like the transition for a presentation, but I don't want this to be an overview of what's to come -->
				<!-- TODO: Should this wrap up all the semantic markup and tease RDFa/Microdata/Microformats? The latter three are all related -->
				<header><h1>But wait, there's more!</h1></header>
				<div>
					<p>How do you integrate with a web system that doens't offer services?</p>
					<aside>
						<p>
							Envision a scenario where you need to integrate with another system, but that system doesn't 
							have any public services available. Heck, chances are, if you're a developer, you've been there 
							at one point or another. What choices are you left with? One choice: screen-scraping &ndash; 
							grabbing the HTML from the site and digging through it to gleam what you need from it. This 
							typically ends up being a pain-staking process, where you hope and pray the HTML doesn't change 
							in an update. HTML5 offers two ways to solve this problem using standard markup that shouldn't 
							change, assuming the system abides by published vocabularies. One good example is search 
							engines, which parse some standard metadata formats to extract information like addresses and 
							ratings.
						</p>
						<p>
							You probably spotted the issue: <q>HTML5 offers two ways to solve this problem...</q>. Two!? 
							Seriously? Luckily, you have a choice between a complex standard with a long legacy, founded in 
							XML, or a newer, simpler patter that simply tweaks the markup you already have. Of course, life 
							is never really this easy and neither is your decision, because there's actually a third player, 
							too.
						</p>
					</aside>
					<dl>
						<dt>RDFa</dt>
						<dd>
							<aside>
								<p>
									Resource Description Format in attributes (RDFa) was a reimagination of RDF, with an 
									eye on XHTML 2.0 &ndash; yes, you read that correctly, XHTML 2.0 &ndash; to further 
									extended documents using attributes. The concept was fairly simple, but many argued 
									the implementation is overly complex; especially, when ladened with the XHTML 
									requirement.
								</p>
							</aside>
						</dd>
						<dt>Microformats</dt>
						<dd>
							<aside>
								<p>
									The broad web community has a long-standing practice of finding new ways to extend the 
									platform they've been given, and this is how Microformats were born. As a grass-roots 
									initiative, Microformats have spread immensely, resulting in vibrant community at 
									<a href="http://microformats.org">microformats.org</a>, which has a wiki of the most 
									popular Microformats.
								</p>
							</aside>
						</dd>
						<dt>Microdata</dt>
						<dd>
							<aside>
								<p>
									When the WHATWG formed, the group liked the concept of both RDFa and Microformats, 
									but with a neverending, passionate debate for both sides, the group decided, for 
									better or worse, to establish a new standard, taking lessons learned from the 
									previous two. I'm sure the fact that XHTML 2.0 was the aim for RDFa had 
									<em>nothing</em> to do with it.
								</p>
							</aside>
						</dd>
					</dl>
					<p>To really understand the differences, let's take a look at a real-world example.</p>
					<aside>
						<p>
							I grabbed this off of a Microsoft site exactly as-is &ndash; well, I removed some styles and 
							closed tags, but other than that, it's exact (close enough!). Already, we have a problem. Right 
							now, this is just one big blob of text. That's not very useful, so let's wrap each semantic 
							element into its own tag. I'm also going to move the country to correct the address. We'll use 
							this as our basis to compare with each of the other formats.
						</p>
					</aside>
					<code>
						&lt;div&gt;<br/>
						&nbsp; &nbsp; <ins>&lt;div&gt;</ins>Microsoft Corporation<ins>&lt;div&gt;</ins><del>&lt;br/&gt;</del><br/>
						<ins>&nbsp; &nbsp; &lt;div&gt;<br/></ins>
						&nbsp; &nbsp; <ins>&nbsp; &nbsp; &lt;span&gt;</ins>One Microsoft Way<ins>&lt;/span&gt;</ins>&lt;br/&gt;<br/>
						&nbsp; &nbsp; <ins>&nbsp; &nbsp; &lt;span&gt;</ins>Redmond<ins>&lt;/span&gt;</ins>, <br/>
						&nbsp; &nbsp; <ins>&nbsp; &nbsp; &lt;abbr title="Washington"&gt;</ins>WA<ins>&lt;/abbr&gt;, <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;USA&lt;/span&gt;</ins> <br/>
						&nbsp; &nbsp; <ins>&nbsp; &nbsp; &lt;span&gt;</ins>98052-7329<ins>&lt;/span&gt;</ins><del>&lt;br/&gt;</del><br/>
						<del>&nbsp; &nbsp; USA&lt;br/&gt;<br/></del>
						<ins>&nbsp; &nbsp; &lt;/div&gt;<br/></ins>
						&nbsp; &nbsp; <ins>&lt;div&gt;</ins>Tel: (425) 882-8080<ins>&lt;/div&gt;</ins><del>&lt;br/&gt;</del><br/>
						&nbsp; &nbsp; <ins>&lt;div&gt;</ins>Fax: (425) 706-7329<ins>&lt;/div&gt;</ins><del>&lt;br/&gt;</del><br/>
						&nbsp; &nbsp; <ins class="slidenote" title="we don't need a div here, but I've added it for consistency">&lt;div&gt;</ins>&lt;a href="http://www.microsoft.com"&gt;http://www.microsoft.com&lt;/a&gt;<ins>&lt;div&gt;</ins><br/>
						&lt;/div&gt;
					</code>
				<section id="semantics-extend-rdfa">
					<header><h1>RDFa</h1></header>
					<!-- TODO: Is there a specific tag for fax numbers in the Google RDFa schema for organizations? -->
					<code>
						&lt;div<ins> xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Organization"</ins>&gt;<br/>
						&nbsp; &nbsp; &lt;div<ins> property="v:name"</ins>&gt;Microsoft Corporation&lt;div&gt;<br/>
						&nbsp; &nbsp; &lt;div<ins> rel="v:address"</ins>&gt;<br/>
						<ins>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div typeof="v:Address"&gt;<br/></ins>
						<ins>&nbsp; &nbsp; </ins>&nbsp; &nbsp; &nbsp; &nbsp; &lt;span<ins> property="v:street-address"</ins>&gt;One Microsoft Way&lt;/span&gt;&lt;br/&gt;<br/>
						<ins>&nbsp; &nbsp; </ins>&nbsp; &nbsp; &nbsp; &nbsp; &lt;span<ins> property="v:locality"</ins>&gt;Redmond&lt;/span&gt;, <br/>
						<ins>&nbsp; &nbsp; </ins>&nbsp; &nbsp; &nbsp; &nbsp; &lt;abbr<ins> property="v:region"</ins> title="Washington"&gt;WA&lt;/abbr&gt;, <br/>
						<ins>&nbsp; &nbsp; </ins>&nbsp; &nbsp; &nbsp; &nbsp; &lt;span<ins> property="postal-code"</ins>&gt;USA&lt;/span&gt; <br/>
						<ins>&nbsp; &nbsp; </ins>&nbsp; &nbsp; &nbsp; &nbsp; &lt;span<ins> property="v:country-name"</ins>&gt;98052-7329&lt;/span&gt;<br/>
						<ins>&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<br/></ins>
						&nbsp; &nbsp; &lt;/div&gt;<br/>
						&nbsp; &nbsp; &lt;div&gt;Tel: <ins>&lt;span property="v:tel"</ins>&gt;(425) 882-8080<ins>&lt;/span&gt;</ins>&lt;/div&gt;<br/>
						&nbsp; &nbsp; &lt;div&gt;Fax: <ins>&lt;span property="v:tel"</ins>&gt;(425) 706-7329<ins>&lt;/span&gt;</ins>&lt;/div&gt;<br/>
						&nbsp; &nbsp; &lt;div&gt;&lt;a href="http://www.microsoft.com"<ins> rel="v:url"</ins>&gt;http://www.microsoft.com&lt;/a&gt;&lt;div&gt;<br/>
						&lt;/div&gt;
					</code>
				</section>
				<section id="semantics-extend-microformats">
					<header><h1>Microformats</h1></header>
					<code>
						&lt;div<ins> class="vcard"</ins>&gt;<br/>
						&nbsp; &nbsp; &lt;div<ins> class="fn org"</ins>&gt;Microsoft Corporation&lt;div&gt;<br/>
						&nbsp; &nbsp; &lt;div<ins> class="adr"</ins>&gt;<br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;span<ins> class="street-address"</ins>&gt;One Microsoft Way&lt;/span&gt;&lt;br/&gt;<br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;span<ins> class="locality"</ins>&gt;Redmond&lt;/span&gt;, <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;abbr<ins> class="region"</ins> title="Washington"&gt;WA&lt;/abbr&gt;, <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;span<ins> class="country-name"</ins>&gt;USA&lt;/span&gt; <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;span<ins> class="postal-code"</ins>&gt;98052-7329&lt;/span&gt;<br/>
						&nbsp; &nbsp; &lt;/div&gt;<br/>
						&nbsp; &nbsp; &lt;div&gt;<ins>&lt;span class="type"&gt;</ins>Tel:<ins>&lt;/span&gt;</ins> (425) 882-8080&lt;/div&gt;<br/>
						&nbsp; &nbsp; &lt;div&gt;<ins>&lt;span class="type"&gt;</ins>Fax:<ins>&lt;/span&gt;</ins> (425) 706-7329&lt;/div&gt;<br/>
						&nbsp; &nbsp; &lt;div&gt;&lt;a href="http://www.microsoft.com"<ins> class="url"</ins>&gt;http://www.microsoft.com&lt;/a&gt;&lt;div&gt;<br/>
						&lt;/div&gt;
					</code>
				</section>
				<section id="semantics-extend-microdata">
					<header><h1>Microdata</h1></header>
					<code>
						&lt;div<ins> itemscope="itemscope" itemtype="<span class="slidenote" title="this can be any public/private vocabulary; the key is to build off a known definition">http://schema.org/Corporation</span>"</ins>&gt;<br/>
						&nbsp; &nbsp; &lt;div<ins> itemprop="name"</ins>&gt;Microsoft Corporation&lt;div&gt;<br/>
						&nbsp; &nbsp; &lt;div<ins> itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress"</ins>&gt;<br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;span<ins> itemprop="streetAddress"</ins>&gt;One Microsoft Way&lt;/span&gt;&lt;br/&gt;<br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;span<ins> itemprop="addressLocality"</ins>&gt;Redmond&lt;/span&gt;, <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;abbr<ins> itemprop="addressRegion"</ins> title="Washington"&gt;WA&lt;/abbr&gt;, <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;span<ins> itemprop="addressCountry"</ins>&gt;USA&lt;/span&gt; <br/>
						&nbsp; &nbsp; &nbsp; &nbsp; &lt;span<ins> itemprop="postalCode"</ins>&gt;98052-7329&lt;/span&gt;<br/>
						&nbsp; &nbsp; &lt;/div&gt;<br/>
						&nbsp; &nbsp; &lt;div&gt;Tel: <ins>&lt;span itemprop="telephone"</ins>&gt;(425) 882-8080<ins>&lt;/span&gt;</ins>&lt;/div&gt;<br/>
						&nbsp; &nbsp; &lt;div&gt;Fax: <ins>&lt;span itemprop="faxNumber"</ins>&gt;(425) 706-7329<ins>&lt;/span&gt;</ins>&lt;/div&gt;<br/>
						&nbsp; &nbsp; &lt;div&gt;&lt;a href="http://www.microsoft.com"<ins> itemprop="url"</ins>&gt;http://www.microsoft.com&lt;/a&gt;&lt;div&gt;<br/>
						&lt;/div&gt;
					</code>
				</section>
				<footer>
					<h1>It's a micro battle royale!</h1>
					<p>Differneces are minimal</p>
					<p>Microformats definitely the smallest</p>
					<p>Microdata arguably has the brightest future</p>
					<p>Look at your community to guide your decision</p>
				</footer>
				</div>
			</section>
			<footer id="semantics-footer">
				<h1>The more you know...</h1>
				<h2>Tools...</h2>
				<ul>
					<li><a href="http://modernizr.com">Modernizr</a></li>
					<li><a href="http://code.google.com/p/html5shiv">html5shim</a></li>
				</ul>
				<h2>References...</h2>
				<ul>
					<li><a href="http://html5doctor.com/outlines">html5doctor.com/outlines</a> &ndash; discussion about how structure is implied</li>
					<li><a href="http://schema.org">schema.org</a> &ndash; collaboration between Bing, Google, and Yahoo! to promote Microdata</li>
					<li><a href="http://microformats.org">microformats.org</a></li>
				</ul>
				<h2>More...</h2>
				<ul>
					<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/EXT19">Microformats and Semantic Markup (Mix11)</a></li>
					<li><a href="http://code.google.com/webstats">code.google.com/webstats</a> &ndash; most used ids/classes</li>
				</ul>
			</footer>
		</article>


		<article id="offstore">
			<header id="offstore-top">
				<h1>Offline &amp; Storage</h1>
				<blockquote cite="http://w3.org/html/logo">
					<p>
						Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 
						App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
					</p>
					<div class="author">W3C</div>
				</blockquote>
			</header>
			<section id="offstore-appcache">
				<header><h1>Application Cache</h1></header>
				<!-- TODO: Add check to see if web storage is available - Modernizr.localstorage + Modernizr.sessionstorage -->
				<div>
				<p>Create a manifest file</p>
				<!-- TODO: <span class="slidenote" title="this line must be exact">CACHE MANIFEST</span> -->
				<!-- TOOD: <span class="slidenote" title="default section, all files cached">CACHE:</span> -->
				<!-- TOOD: <span class="slidenote" title="prefer online, but fallback to offline, if not available">FALLBACK:</span> -->
				<!-- TODO: This was the example in the spec, but wouldn't it be an error for JS/CSS/image files? Can '/' be a pattern? -->
				<!-- TOOD: <span class="slidenote" title="if any resource fails, get the 'offline.html' file">/ /offline.html</span> -->
				<!-- TOOD: <span class="slidenote" title="never cache these files">NETWORK:</span> -->
				<!-- TOOD: <span class="slidenote" title="everything should be online">*</span> -->
<pre class="brush:xml">CACHE MANIFEST
CACHE:
index.html
about.html
main.css
main.js
jquery.min.js

FALLBACK:
/ /offline.html

NETWORK:
*</pre>
				<!-- TODO: Is there already a library that can generate these via .ashx? It wouldn't be hard... -->
				<p>Web server <em>must</em> serve files as <code>text/cache-manifest</code></p>
				<p>Tell the browser about your content</p>
				<pre class="brush:xml"><html lang="en" manifest="/offline.appcache"></pre>
				<p>That's it!</p>
				<p>Word of warning...</p>
				<p>All files re-downloaded when manifest changes</p>
				<p>May want to consider separate manifests for separate sections</p>
				<p>Watch for overlaps!</p>
				<!-- TODO: Include info on: window.applicationCache, body.ononline, body.onoffline, navigator.onLine -->
				<!-- TODO: Note that amount of disk space to allow for and if/how to increase it is explicitly not in the spec and will differ by browser -->
				<footer id="offstore-appcache-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<code>if (Modernizr.applicationcache) { ... }</code>
					<h2>Fallback options...</h2>
					<ul>
						<li><a href="http://code.google.com/p/html5-gears">HTML5 Gears</a> &ndash; requires Google Gears browser plugin</li>
					</ul>
				</footer>
				</div>
			</section>
			<section id="offstore-storage">
				<header><h1>Web Storage</h1></header>
				<!-- TODO: Add check to see if web storage is available - Modernizr.localstorage + Modernizr.sessionstorage -->
				<div>
				<!-- TODO: I don't like these examples; we should standardize how and what to show for all APIs -->
				<!-- TODO: Show .clear(), window.storage event (w/ jQuery), and event args (key, oldValue, newValue, url, storageArea)? -->
				<p>Local and session storage for string values</p>
				<p>Local persistent and available across browser sessions, session limited to current session</p>
				<p>Beware new windows/tabs in the same session!</p>
				<p>May consider ways to serialize (e.g. <code>JSON.stringify()</code> and <code>JSON.parse()</code>) &ndash; beware security concerns!</p>
				<!-- TODO: Add code sample using JSON storage -->
<pre class="brush:js">if (Modernizr.localstorage){
	var p = window.localStorage.getItem(key);
	p = p == null ? getDefaultPrefs() : p;
	...
	window.localStorage.removeItem(key);
	...
	window.localStorage.setItem(key, value);
}</pre>
				<p>Can also get/set via standard dictionary access methods.</p>
<pre class="brush:js">var exists = 'prefs' in window.localStorage,
	getAsDict = window.localStorage['prefs'],
	getAsProp = window.localStorage.prefs;
...
window.localStorage.prefs = newPrefs;
window.localStorage['prefs'] = newPrefs;</pre>
				<!-- TODO: Add code sample using window.onstorage event -->
				<p>Same available for <code>window.sessionStorage</code></p>
				<!-- TODO: Note that spec recommends 5MB per domain and 'may' allow user to be prompted to increase it; will likely differ by browser -->
				<footer id="offstore-storage-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
<pre class="brush:js">if (Modernizr.localstorage) { ... }
if (Modernizr.sessionstorage) { ... }</pre>
					<h2>Fallback options using HTML5 interface...</h2>
					<ul>
						<li><a href="http://gist.github.com/350433">Storage polyfill</a></li>
						<li><a href="http://code.google.com/p/sessionstorage">sessionstorage</a></li>
						<li><a href="http://github.com/TrippingTheBits/webStorage">jQuery webStorage</a> &ndash; HTML5, userData, cookies, or Gears</li>
						<li><a href="http://code.google.com/p/realstorage/">realstorage</a> &ndash; HTML5 or Google Gears; extends core API</li>
					</ul>
					<h2>Fallback options using custom interface...</h2>
					<ul>
						<li><a href="http://pablotron.org/?cid=1557">PersistJS</a> &ndash; HTML5, cookies, userData (IE), globalStorage (Firefox), openDatabase (Safari), Flash, Google Gears </li>
						<li><a href="http://yuilibrary.com/gallery/show/storage-lite">YUI Storage Lite</a> &ndash; HTML5, userData (IE), globalStorage (Firefox), openDatabase (Safari)</li>
						<li><a href="http://github.com/molily/javascript-client-side-session-storage">Session Storage Wrapper (ssw)</a> &ndash; HTML5, cookies, userData (IE), or in-memory</li>
						<li><a href="http://amplifyjs.com">AmplifyJS</a> &ndash; HTML5, userData (IE), or in-memory</li>
						<li><a href="http://github.com/marcuswestin/store.js">store.js</a> &ndash; HTML5, userData (IE), globalStorage (Firefox)</li>
						<li><a href="http://www.jstorage.info/">jStorage</a> &ndash; HTML5, userData (IE)</li>
					</ul>
					<h2>Fallback options to implement yourself...</h2>
					<ul>
						<li><a href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx">IE5+ userData Behavior</a></li>
						<li><a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Flash Local Storage</a></li>
						<li><a href="http://www.silverlight.net/learn/graphics/file-and-local-data/isolated-storage-(silverlight-quickstart)">Silverlight Isolated Storage</a></li>
					</ul>
				</footer>
				</div>
			</section>
			<section id="offstore-file">
				<header><h1>File API</h1></header>
				<div>
				<p>Trigger file dialog to select files</p>
				<p>Read raw, binary data (blob); contents via stream; and file metadata</p>
				<!-- TODO: Is this example representative of enough of the spec? Check the spec for examples. -->
<pre class="brush:js">var iFileList = fileSelector.OpenFileDialog();
var i = 0;
while (i < iFileList.length) {
	var iFileObject = iFileList[i];
	if (iFileObject) {
		alert("File Name: " + iFileObject.name + "; Last modified date: "
			+ iFileObject.lastModifiedDate + "; File size: " + iFileObject.size);
	} 
	i++;
}</pre>
				<footer id="offstore-file-footer">
					<h1>The more you know...</h1>
					<h2>Additional info...</h2>
					<ul>
						<li><a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">HTML5 Labs (Microsoft)</a></li>
					</ul>
					<h2>Detection...</h2>
					<pre class="brush:js">if (typeof FileReader != 'undefined') { ... }</pre>
					<h2>Fallback options...</h2>
					<ul>
						<li><a href="https://github.com/MrSwitch/dropfile">dropfile</a> &ndash; partial implementation using Silverlight</li>
					</ul>
				</footer>
				</div>
			</section>
			<section id="offstore-db">
				<header><h1>IndexedDB</h1></header>
				<div>
				<p>Designed for large amounts of structured data</p>
				<p>Read raw, binary data (blob); contents via stream; and file metadata</p>
				<!-- TODO: Check the spec for a simpler example? -->
<pre class="brush:js">var indexedDBName = 'SyncIndexedDB2';
var version = '2.0';

function PrintDBInformation(idb) {
	if (idb) {
		var sName = idb.name;
		var dVersion = idb.version;
		var dTableNames = idb.objectStoreNames;
		var strNames = 'IndexedDB name: ' + sName 
						+ '; version: ' + dVersion + '; object stores: ' + '\n';
		if (dTableNames.length > 0)
			strNames += 'Object Stores: ';
		for (var i = 0; i < dTableNames.length; i++) {
			strNames = strNames + dTableNames[i] + ', ';
		}
		output_trace(strNames);
	}
}
	 
function create_openDB() 
{
	try 
	{
		var db = window.indexedDBSync.open(indexedDBName);
		if (db) 
		{
			db.setVersion('1.0');
			PrintDBInformation(db);
			db.close();
		}
	}
	catch (e) 
	{
		output_trace('Error: ' + e.message);
	}
}

function output_trace(sMsg){
	var oTrace = document.getElementById('traceoutput');
	if (oTrace.value == '')
		oTrace.value = sMsg;
	else
		oTrace.value = oTrace.value + '\n'+ sMsg;
}</pre>
				<footer id="offstore-db-footer">
					<h1>The more you know...</h1>
					<h2>Additional info...</h2>
					<ul>
						<li><a href="http://html5labs.interoperabilitybridges.com/prototypes/indexeddb/indexeddb/info">HTML5 Labs (Microsoft)</a></li>
					</ul>
					<h2>Detection...</h2>
					<pre class="brush:js">if (!!window.indexedDB){ ... }</pre>
					<h2>Fallback options...</h2>
					<ul>
						<li><a href="https://github.com/MrSwitch/dropfile">dropfile</a> &ndash; partial implementation using Silverlight</li>
					</ul>
				</footer>
				</div>
			</section>
			<section id="offstore-events">
				<header><h1>Online/Offline Events</h1></header>
				<div>
				<p>State of network connectivity</p>
				<code>if (navigator.onLine){ ... }</code>
				<p>...and events to match...</p>
				<pre class="brush:xml"><body ononline="..." onoffline="...">...</body></pre>
				<footer id="offstore-events-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if ('ononline' in window) { ... }</pre>
					<h2>Fallback options...</h2>
					<ul>
						<li><a href="https://github.com/remy/polyfills/blob/master/offline-events.js">Offline Events</a> &ndash; 5-second server ping interval</li>
					</ul>
				</footer>
				</div>
			</section>
		</article>


		<article id="device">
			<header id="device-top">
				<h1>Device Access</h1>
				<blockquote cite="http://w3.org/html/logo">
					<p>
						Beginning with the Geolocation API, Web Applications can present rich, device-aware features and 
						experiences. Incredible device access innovations are being developed and implemented, from 
						audio/video input access to microphones and cameras, to local data such as contacts & events, 
						and even tilt orientation.
					</p>
					<div class="author">W3C</div>
				</blockquote>
			</header>
			<section id="device-geo">
				<header><h1>Geolocation</h1></header>
				<div>
                <aside>
					<p>
						The Gelocation API allows users to share their location with sites and applications they trust. 
						Apps can track this information to provide advanced features, like turn-by-turn directions, 
						location-aware ads, and tailored searches based on locale. In addition to latitude/longitude 
						the API exposes the user's altitude, heading, speed, and orientation. To protect the user's 
						privacy, the browser prompts for permission before sharing location details.
					</p>
				</aside>
                <ol>
					<li>Assisted GPS (AGPS)
						<ul>
							<li>Improves performance by looking online
								<ul>
									<li>Location of the GPS satellites</li>
									<li>Conditions affecting signal</li>
									<li>Precise time</li>
									<li>Unassisted GPS can take 4 or more minutes to start up</li>
								</ul>
							</li>
							<li>Accurate to 2-3 feet</li>
						</ul>
					</li>
					<li>Triangulate using Cell Tower id
						<ul>
							<li>All cell towers have a unique id</li>
						</ul>
					</li>
					<li>WiFi Signatures
						<ul>
							<!-- TODO: What is the point of mentioning this? -->
							<li>Google recorded WIFI signatures when it did street view</li>
							<li>Can register location of your access point in a database</li>
						</ul>
					</li>
					<li>Lookup IP address</li>
					<li>Just ask the user
						<ul>
							<li>Can set your location in Control Panel</li>
						</ul>
					</li>
                </ol>
                <aside>
					<p>
						To protect the user's privacy, the browser prompts for permission before sharing location 
						details.
					</p>
				</aside>
				<!-- TODO: Show geolocaiton prompt for each browser -->
                <figure>
					<figcaption>Geolocation prompt in Chrome</figcaption>
					<img src="../content/images/geo.png" alt="geolocation prompt in Chrome"/>
				</figure>
				<!-- TODO: Change formatter to use Visual Studio coloring -->
<pre class="brush:js">&lt;script&gt;
if (Modernizr.geolocation){
	function success(position){ 
		var timestamp = position.timestamp,
			accuracyInMeters = position.coords.accuracy,
			altitudeInMeters = position.coords.altitude,
			altitudeAccuracyInMeters = position.coords.altitudeAccuracy,
			headingDegreesFromNorth = position.coords.heading,
			speedInMetersPerSecond = position.coords.speed;
		new VEMap('mapElement').LoadMap(new VELatLong(
			position.coords.latitude,
			position.coords.longitude,
			12)); // zoom level
	}
	function error(){ alert('Failed to get your current position'); }
	navigator.geolocation.getCurrentPosition(success, error, 
		{ timeout:5000, maximumAge:10000, enableHighAccuracy:true });
}
&lt;/script&gt;
&lt;div id="mapElement"&gt;&lt;/div&gt;</pre>
				<!-- TODO: Add demo with navigator.geolocation.watchPosition() -->
				<!-- TODO: Add demo using flickr.places.findByLatLon() -->
				<!-- TODO: Show how permission is requested in different browsers -->
				<aside>
					<p>
						Here, we retrieve the user's current position and use it to pin-point the location on a map.
					</p>
				</aside>
				<figure>
					<figcaption>Bing map centered on user's current location</figcaption>
					<img src="../content/images/map.png" alt="Bing map centered on user's location"/>
				</figure>    
				<!-- TODO: Implement live geolocation example -->
				<!-- 
				<p>This code fetches your current position and then passes the latitude/longitue into the Bing maps.  If your browser supports geolocation and you accepted the prompt, you should see a map with your location below.</p>
				<script type="text/javascript">
					navigator.geolocation.getCurrentPosition(function (position) {
						new VEMap('mapElement').LoadMap(new VELatLong(
						position.coords.latitude,
						position.coords.longitude,
						12)); // zoom level
					});
				</script>
				<div id=mapElement><figure><figcaption>Unable to get location.  Here is a screenshot instead.</figcaption><img src="../content/images/map.png" /></figure></div>
				-->
				<footer id="device-geo-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if (Modernizr.geolocation){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="https://gist.github.com/366184">gist.github.com/366184</a> &ndash; partially implemented; requires jQuery, uses Google for IP-based geolocation</li>
						<li><a href="http://code.google.com/p/geo-location-javascript/">code.google.com/p/geo-location-javascript/</a> &ndash; intended for mobile</li>
						<li><a href="https://github.com/manuelbieh/Better-Geolocation-API/">Better Geolocation</a></li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/EXT04">Riding the Geolocation Wave (Mix11)</a></li>
					</ul>
				</footer>
				</div>
			</section>
			<section id="device-capture">
				<header><h1>Media Capture API</h1></header>
				<div>
				<p>Image and video capture using existing file upload element</p>
				<pre class="brush:xml"><input id="capture" type="file" accept="image/*" capture="camera" /></pre>
<pre class="brush:js">// access file from input element
var captureInput = document.getElementById('capture'), 
	file = captureInput.files[0];
if (file){
	// get format data asynchronously
	file.getFormatData(displayFormatData, errorHandler);
}

// success callback
function displayFormatData(formatData) {  
	var mainType = file.type.split('/')[0]; // 'image', 'video' or 'audio'
	var mediaDescriptionNode = document.createElement('p');
	if (mainType == 'image'){
		mediaDescriptionNode.appendChild(document.createTextNode('This is an image of dimensions ' + formatData.width + 'x' + formatData.height);
	}else{
		mediaDescriptionNode.appendChild(document.createTextNode('Duration: ' + formatData.duration  + 's');
	}
	captureInput.parentNode.insertBefore(mediaDescriptionNode, captureInput);
}

// error callback
function errorHandler(error) {
	alert('Couldn’t retrieve format properties for the selected file (error code ' + error.code + ')');
}</pre>
				<section id="device-capture-speech">
					<header><h1>Proposed Speech API</h1></header>
					<p>Microsoft proposed Speech API to W3C in March 2011</p>
					<p>Media Capture API most likely location</p>
					<p><a href="http://html5labs.interoperabilitybridges.com/prototypes/media-capture-api/media-capture-api/info">html5labs.interoperabilitybridges.com/prototypes/media-capture-api/media-capture-api/info</a></p>
				</section>
				</div>
			</section>
		</article>


		<article id="connect">
			<header id="connect-top">
				<h1>Connectivity</h1>
				<blockquote cite="http://w3.org/html/logo">
					<p>
						More efficient connectivity means more real-time chats, faster games, and better communication. 
						Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server 
						more efficiently than ever before.
					</p>
					<div class="author">W3C</div>
				</blockquote>
			</header>
			<section id="connect-sockets">
				<header><h1>Web Sockets</h1></header>
				<div>
				<aside>
	                <p>
						The Web Sockets API provides two-way communication over a TCP socket, enabling a lighter-weight 
						solution than polling the server, resulting in lower latency and better resource utilitization.
					</p>
				</aside>
				<p>Bi-directional, full-duplex communication channels over a single TCP socket</p>
				<p>Real-time performance</p>
				<!-- TODO: Replace this formatter with one that uses Visual Studio coloring -->
<pre class="brush:js">// connect to the web site
var socket = new WebSocket('ws://contoso.com');
socket.onopen = function(event) { alert('socket open'); };
socket.onmessage = function(event) { alert('data recieved: ' + event.data); };
socket.onclose = function(event) { alert('socket closed'); };
socket.postMessage('Hello Server!');
socket.disconnect();</pre>
				<footer id="connect-sockets-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if (!!window.WebSocket){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://socket.io/">socket.io</a> &ndash; custom API; HTML5, Flash sockets, AJAX long-polling, AJAX multipart streaming, iframe, JSONP polling</li>
						<li><a href="https://github.com/gimite/web-socket-js">web_socket.js</a> &ndash; forced Flash fallback; only use if Web Sockets support is not available</li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://html5labs.interoperabilitybridges.com/prototypes/websockets/websockets/info">HTML5 Labs (Microsoft)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM04">Filling the HTML5 Gaps with Polyfills and Shims (Mix11)</a></li>
					</ul>
				</footer>
				</div>
			</section>
			<section id="connect-events">
				<header><h1>Server-Sent Events</h1></header>
				<div>
				<p>Opens HTTP connection for push notifications from a server</p>
				<p>Server must send messages with <code>text/event-stream</code> MIME type</p>
				<p>Designed to work with other push notification schemes, like Push SMS</p>
<pre class="brush:js">var source = new EventSource('/updates');
source.onmessage = function (event) { alert(event.data); };</pre>
				<footer id="connect-events-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if (typeof EventSource !== 'undefined'){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://github.com/Yaffle/polyfills/blob/master/eventsource.js">github.com/Yaffle/polyfills/blob/master/eventsource.js</a> &ndash; server push (not HTML5) or polling</li>
						<li><a href="http://github.com/rwldrn/jquery.eventsource">jQuery EventSource</a> &ndash; requires jQuery, uses custom API</li>
						<li><a href="http://github.com/remy/polyfills/blob/master/EventSource.js">github.com/remy/polyfills/blob/master/EventSource.js</a> &ndash; polling</li>
					</ul>
				</footer>
				</div>
			</section>
		</article>
		
		
		<article id="media">
			<header id="media-top">
				<h1>Multimedia</h1>
				<blockquote cite="http://w3.org/html/logo">
					<p>
						Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and 
						sites. Lights, camera, action!
					</p>
					<div class="author">W3C</div>
				</blockquote>
			</header>
			<section id="media-audio">
				<header><h1>Audio</h1></header>
<div>
                <aside>
					<p>
						The <code>&lt;audio&gt;</code> element allows you to play music natively in HTML &ndash; go 
						figure, right?.
					</p>
				</aside>
<pre class="brush:xml">&lt;audio src="nationalAnthem.mp3"&gt;
    Your browser does not support the audio element.
&lt;/audio&gt;</pre>
				<ul>
					<li><code class="slidenote" title="audio will start playing once loaded">autoplay</code></li>
					<li><code class="slidenote" title="on-screen controls are displayed">controls</code></li>
					<li><code class="slidenote" title="automatically restarts, when audio ends">loop</code></li>
					<li><code class="slidenote" title="starts loading the file as soon as the tag is hit, instead of waiting until after all content is loaded">preload</code></li>
					<li><code class="slidenote" title="location of the audio file">src</code></li>
				</ul>
				<footer id="media-audio-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if (!!Modernizr.audio){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://github.com/happyworm/jPlayer">jPlayer</a> &ndash; HTML5, Flash; requires jQuery</li>
						<li><a href="http://kolber.github.com/audiojs/">audio.js</a> &ndash; HTML5, Flash</li>
						<li><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager</a> &ndash; HTML5, Flash</li>
						<li><a href="https://github.com/etianen/html5media">html5media</a> &ndash; HTML5, Flash</li>
					</ul>
				</footer>
</div>
			</section>
			<section id="media-video">
				<header><h1>Video</h1></header>
				<aside>
					<p>
						The <code>&lt;video&gt;</code> element allows you to play video natively in HTML &ndash; bet ya 
						didn't see that one coming! The syntax is nearly identical to the similiar to the 
						<code>&lt;audio&gt;</code> element above and shares the same attributes.
					</p>
				</aside>
				<div>
<pre class="brush:xml">&lt;video src="kittehs.mp4"&gt;
	Your browser does not support the video element.
&lt;/video&gt;</pre>
				<ul>
					<li>No full screen</li>
					<li>No adaptive streaming</li>
				</ul>
				<footer id="media-video-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<code>if (!!Modernizr.video){ ... }</code>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://github.com/happyworm/jPlayer">jPlayer</a> &ndash; HTML5, Flash; requires jQuery</li>
						<li><a href="http://mediaelementjs.com/">MediaElement.js</a> &ndash; HTML5, Flash, Silverlight</li>
						<li><a href="https://github.com/etianen/html5media">html5media</a> &ndash; HTML5, Flash</li>
						<li><a href="http://videojs.com/">VideoJS</a> &ndash; HTML5, Flash</li>
						<li><a href="http://camendesign.com/code/video_for_everybody">Video for Everybody</a> &ndash; HTML5, Flash</li>
					</ul>
				</footer></div>
			</section>
			<section>
				<header><h1>Embed</h1></header>
			</section>
			<section>
				<header><h1>Embed vs Object vs Img vs Iframe</h1></header>
			</section>
		</article>
		
		
		<article id="graphics">
			<header id="graphics-top">
				<h1>3D, Graphics, &amp; Effects</h1>
				<blockquote cite="http://w3.org/html/logo">
					<p>
						Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning 
						visuals natively rendered in the browser.
					</p>
					<div class="author">W3C</div>
				</blockquote>
			</header>
			<section id="graphics-svg">
				<header><h1>SVG</h1></header>
				<div>
				<p>2D, <span class="slidenote" title="object tree kept in memory, unlike Canvas and XNA">retained mode</span>, vector graphics via XML, conceptually like XAML</p>
				<p>Styling with CSS, scripting with JavaScript (when self-contained)</p>
				<p>Inline with <code>&lt;svg&gt;</code>, external .svg file with <code>&lt;img&gt;</code>, <code>&lt;embed&gt;</code>, <code>&lt;object&gt;</code>, or <code>&lt;iframe&gt;</code></p>
				<p>Supported as background image via CSS</p>
				<!-- 
				<img src="../content/images/html5-pubs.svg" type="image/svg+xml"/>
				<embed src="../content/images/html5-pubs.svg" type="image/svg+xml"/>
				<object data="../content/images/html5-pubs.svg" width="100%" height="400px" type="image/svg+xml">X-P</object>
				<iframe src="../content/images/html5-pubs.svg" type="image/svg+xml"></iframe>
				<pre>
					<code>
						&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.0" 
							width="165.95422" height="73.61879"&gt;
							&lt;g transform="translate(-280.67154,-494.78412)"&gt;
								&lt;path style="font-size:781.26818848px;font-style:normal;font-weight:normal;text-align:start;line-height:125%;text-anchor:start;fill:#0075be;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
									d="M 351.2253,527.37811 L 351.2253,543.97963 L 357.9564,543.97963 L 357.9564,527.21482 C 358.52672,517.75385 383.89082,514.62004 386.41666,527.21482 L 386.41666,543.97963 L 393.45994,543.97963 L 393.45994,527.37811 C 393.45989,525.47304 392.98265,523.74031 392.02825,522.17993 C 391.07375,520.61959 389.69427,519.27242 387.88979,518.13842 C 386.08523,517.00446 383.88552,516.12449 381.29064,515.4985 C 378.69568,514.87257 375.75775,514.55959 372.47684,514.55956 C 369.2257,514.55959 366.30269,514.88164 363.70779,515.52572 C 361.11285,516.16985 358.8833,517.06796 357.01914,518.22006 C 355.15496,519.37221 353.72329,520.72846 352.72409,522.2888 C 351.7249,523.84918 351.2253,525.54561 351.2253,527.37811 L 351.2253,527.37811 z"/&gt;
								&lt;path style="fill:#0075be;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
									d="M 339.71777,516.30504 C 342.3787,517.42558 344.56536,516.88621 346.74008,516.30504 L 346.74008,544.13052 L 339.71777,544.13052 L 339.71777,516.30504 z"/&gt;
								&lt;path style="opacity:1;fill:#fba829;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
									d="M 312.08514,454.75558 A 16.241785,11.080844 0 1 1 279.60157,454.75558 A 16.241785,11.080844 0 1 1 312.08514,454.75558 z"
									transform="matrix(0.3155432,0,0,0.323756,249.87205,362.52803)"/&gt;
								&lt;path style="font-size:3120.79492188px;font-style:normal;font-weight:normal;text-align:start;line-height:125%;text-anchor:start;fill:#0075be;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
									d="M 336.59587,531.52541 C 337.47355,525.12066 333.06382,520.9562 330.1343,518.92023 C 325.80065,515.90841 320.33956,514.42199 315.0549,514.14674 C 308.81642,514.08511 302.75903,514.89785 297.21129,518.75698 L 297.21129,506.89105 L 290.26569,506.89105 L 290.26569,528.39291 C 290.18674,537.39681 296.24633,541.25296 304.04934,544.20982 C 306.88441,544.90918 310.0258,545.25887 313.47352,545.25887 C 316.86419,545.25887 319.96997,544.90918 322.79084,544.20982 C 325.61164,543.51044 328.04782,542.38625 330.09938,541.15206 C 332.15086,539.91788 333.74649,538.47388 334.88627,536.82007 C 336.02595,535.16627 336.59582,533.40138 336.59587,531.52541 L 336.59587,531.52541 z M 315.5199,541.42446 C 307.71668,541.66806 298.57132,539.3125 297.68354,530.15805 C 297.19024,525.07129 302.25643,518.66619 313.47352,518.27129 C 318.08551,518.10893 328.84393,520.68059 329.57833,529.37098 C 330.0311,534.72872 323.32313,541.18087 315.5199,541.42446 z"/&gt;
								&lt;path style="font-size:10988.16210938px;font-style:normal;font-weight:normal;text-align:start;line-height:125%;text-anchor:start;fill:#0075be;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans"
									d="M 434.37889,527.30393 C 434.37378,524.01082 432.58237,521.65295 430.55535,519.67404 C 432.82141,519.42535 435.23632,519.41089 437.5486,519.60017 L 437.5486,513.19639 C 432.96557,512.87197 427.67915,514.17413 424.91934,516.02552 C 424.20744,515.74997 423.45964,515.49976 422.67593,515.27495 C 420.26879,514.58446 417.6258,514.23921 414.74695,514.23919 C 411.81969,514.23921 409.15855,514.58447 406.76354,515.27495 C 404.36851,515.96548 402.30008,516.89531 400.55825,518.06445 C 398.81641,519.23363 397.46165,520.61464 396.49398,522.2075 C 395.52628,523.8004 395.04244,525.4992 395.04245,527.30393 C 395.04244,529.09299 395.52628,530.76825 396.49398,532.32973 C 397.46165,533.89123 398.78012,535.26048 400.44939,536.43748 C 402.11864,537.61448 404.06611,538.53647 406.2918,539.20343 C 410.49912,540.23862 415.12444,540.71203 419.42731,539.94823 C 431.07298,544.39932 426.45661,553.3839 422.07677,555.28431 C 414.01671,558.78158 406.652,556.8212 403.36386,551.53799 L 395.8948,551.53799 C 398.59797,559.06139 409.30597,561.26034 414.47438,561.32121 C 425.6492,561.45284 438.05562,554.06215 433.11504,543.73484 C 431.70105,540.77917 428.2903,538.3586 426.20669,537.83507 C 431.44655,535.48685 434.38568,531.6782 434.37889,527.30393 z M 414.74695,536.28309 C 407.93359,536.28309 402.45396,532.20275 402.45396,527.35101 C 402.45396,521.26472 410.19056,518.27768 414.74695,518.27768 C 421.6183,518.27768 426.85512,522.69085 426.85512,527.35101 C 426.85512,533.37169 420.08556,536.28309 414.74695,536.28309 z"/&gt;
							&lt;/g&gt;
						&lt;/svg&gt;
					</code>
				</pre>
				-->
				<p>Most important SVG property: <code>viewBox</code></p>
				<pre class="brush:xml">&lt;svg viewBox="[x] [y] [width] [height]" height="[height]" width="[width]"&gt;...&lt;/svg&gt;</pre>
				<footer id="graphics-svg-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if (Modernizr.svg){ ... }</pre>
					<pre class="brush:js">if (Modernizr.inlinesvg){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://code.google.com/p/svgweb/">SVG Web</a> &ndash; HTML5, Flash</li>
						<li><a href="http://raphaeljs.com/">Raphael</a> &ndash; HTML5, VML</li>
						<li><a href="http://code.google.com/p/canvg/">canvg</a> &ndash; Flash, Canvas; overrides HTML5</li>
						<li><a href="http://docs.dojocampus.org/dojox/gfx/">dojox.gfx</a> &ndash; HTML5, VML, Silverlight, Canvas; requires Dojo</li>
						<li><a href="https://github.com/kangax/fabric.js">fabric.js</a> &ndash; Canvas</li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM15">Modernizing Your Website: SVG Meets HTML5 (Mix11)</a></li>
					</ul>
				</footer>
				</div>
			</section>
			<section id="graphics-canvas">
				<header><h1>Canvas</h1></header>
				<div>
				<aside>
					<p>
						Canvas is a 2D, immediate-mode drawing surface. Immediate mode basically means, unlike SVG, 
						Silverlight, and Flash, Canvas does not remember the object graph. Once you paint the canvas it 
						forgets about the objects. If you want to move or resize an element, you need to redraw the 
						entire canvas. Canvas does draw crisp vector graphics, but once they are drawn onto the canvas, 
						they are bitmaps. You are also responsible for implementing any higher-level functionality 
						yourself, like animations and mouse events.
					</p>
				</aside>
				<p>2D, <span class="slidenote" title="doesn't remember what it already drew, unlike SVG and Silverlight">immediate mode</span> drawing surface, conceptually like XNA</p>
				<p>Small API &ndash; 17 objects, 45 methods, 21 attributes</p>
				<p>Not accessible</p>
<pre class="brush:xml"><canvas id="myCanvas">
	This text is displayed if your browser does not support HTML5 Canvas.
</canvas></pre>
<pre class="brush:xml">var canvas = document.getElementById('myCanvas');
var context = example.getContext('2d');
context.fillStyle = 'rgb(255,0,0)';
context.fillRect(30, 30, 50, 50);</pre>
				<aside>
					<p>
						Because of it's simplicity, Canvas is a very fast and flexible presenation tool. While most 
						examples will likely be games, it will also be a valuable tool for building data visualizations. 
						One good example is Pirates Love Daisies, a game build entirely using the Canvas API.
					</p>
				</aside>
				<figure>
					<figcaption><a href="http://www.pirateslovedaisies.com">Pirates Love Daisies</a>, a game written entirely in HTML5</figcaption>
					<a href="http://www.pirateslovedaisies.com"><img src="../content/images/canvas-pirates.png" alt="Pirates Love Daisies, a game written entirely in HTML5"/></a>
				</figure>
				<figure>
					<figcaption><a href="http://chrome.angrybirds.com">Angry Birds</a></figcaption>
					<a href="http://chrome.angrybirds.com"><img src="../content/images/canvas-angrybirds.png" alt="Angry Birds"/></a>
				</figure>
				<figure>
					<figcaption><a href="http://daftpunk.themaninblue.com/">"Definitive Daft Punk" Mashup Song Visualization</a></figcaption>
					<a href="http://daftpunk.themaninblue.com"><img src="../content/images/canvas-daftpunk.png" alt="'Definitive Daft Punk' Mashup Song Visualization"/></a>
				</figure>
				<footer id="graphics-canvas-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if (Modernizr.canvas){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://flashcanvas.net/">FlashCanvas</a> &ndash; Flash</li>
						<li><a href="http://code.google.com/p/explorercanvas/">ExplorerCanvas</a> &ndash; VML</li>
						<li><a href="http://slcanvas.codeplex.com/">Silverlight HTML5 Canvas</a> &ndash; HTML5, Silverlight</li>
						<li><a href="http://burzak.com/proj/fxcanvas/">fxCanvas</a> &ndash; Flash</li>
					</ul>
					<h2>References...</h2>
					<ul>
						<li><a href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">HTML5 Canvas Cheat Sheet</a></li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/CMP06">HTML5 Canvas Mastery</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM03">Deep Dive Into HTML5 <code>&lt;canvas&gt;</code> (Mix11)</a></li>
						<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM12">5 Things You Need To Know To Start Using <code>&lt;canvas&gt;</code> (Mix11)</a></li>
					</ul>
				</footer>
				</div>
			</section>
			<section id="graphics-webgl">
				<header><h1>WebGL</h1></header>
				<p>Canvas extension based on OpenGL to support 3D graphics</p>
				<footer id="graphics-webgl-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if (Modernizr.webgl){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://code.google.com/p/jebgl/">JebGL</a> &ndash; HTML5, Java applet</li>
					</ul>
					<h2>More...</h2>
					<ul>
						<li><a href="http://www.netmagazine.com/features/20-webgl-sites-will-blow-your-mind">20 WebGL sites that will blow your mind</a></li>
					</ul>
				</footer>
			</section>
			<section id="graphics-compare">
				<header><h1>Battle Royale<!--...w/ Cheese--></h1></header>
				<!-- TODO: Include info about when to choose what technology -->
				<ul>
					<li>SVG</li>
					<li>Canvas</li>
					<li>WebGL</li>
					<li>CSS 3D</li>
				</ul>
			</section>
			<section id="graphics-css3d">
				<header><h1>CSS 3D</h1></header>
			</section>
		</article>
		
		
		<article id="perfint">
			<header id="perfint-top">
				<h1>Performance &amp; Integration</h1>
				<blockquote cite="http://w3.org/html/logo">
					<p>
						Make your Web Apps and dynamic web content faster with a variety of techniques and technologies 
						such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.
					</p>
					<div class="author">W3C</div>
				</blockquote>
			</header>
			<section id="perfint-workers">
				<header><h1>Web Workers</h1></header>
				<div>
				<aside>
					<p>
						The Web Workers API allows you to run JavaScript the background. The worker thread cannot 
						interact directly with the DOM, but it can post and recieve messages.
					</p>
				</aside>
                <p>Run JavaScript in background</p>
                <p>Post/receive messages to indirectly interact with the DOM</p>
<pre class="brush:js">var worker = new Worker('myscript.js');
worker.onmessage = function(event) { alert('Message recieved: ' + event.data); };
worker.postMessage('Hello there!');</pre>
				<footer id="graphics-workers-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if (Modernizr.webworkers){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://code.google.com/p/fakeworker-js/">fakeworker.js</a> &ndash; JavaScript timeouts</li>
						<li><a href="http://html5-shims.googlecode.com/svn/trunk/demo/workers.html">html5-shims.googlecode.com/svn/trunk/demo/workers.html</a> &ndash; Google Gears</li>
					</ul>
				</footer>
				</div>
			</section>
			<section id="perfint-xhr">
				<header><h1>XmlHttpRequest 2</h1></header>
				<div>
				<p>Cross-origin requests c/o HTTP headers</p>
				<p>Progress events</p>
				<p>Sending/receiving byte streams</p>
				<footer id="graphics-xhr-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if ('withCredentials' in new XMLHttpRequest){ ... }</pre>
					<pre class="brush:js">if (!!window.FormData){ ... }</pre>
					<pre class="brush:js">if ('upload' in new XMLHttpRequest){ ... }</pre>
					<h2>Fallbacks...</h2>
					<ul>
						<li><a href="http://flxhr.flensed.com/">flXHR</a> &ndash; Flash (cross-domain requests)</li>
					</ul>
				</footer>
				</div>
			</section>
			<section id="perfint-time">
				<header><h1>Performance Timeline</h1></header>
				<div>
				<p>Instrumentation infrastructure via Performance Timeline API</p>
				<p>Access instrumentation details for HTML elements via the Resource Timing API</p>
				<p>Add custom entries to the perf timeline with the User Timing API</p>
				<footer id="perfint-time-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if (!!window.performance.getEntriesByType){ ... }</pre>
				</footer>
				</div>
			</section>
			<section id="perfint-nav">
				<header><h1>Navigation Timing</h1></header>
				<div>
				<p>Navigation details &ndash; <code>window.performance.navigation</code></p>
				<ul id="perfint-nav-navigation">
					<li><code>type</code></li>
					<li><code>redirectCount</code></li>
				</ul>
				<p>Performance timing (in order) &ndash; <code>window.performance.timing</code></p>
				<ol id="perfint-nav-timing">
					<li><code>navigationStart</code></li>
					<li><code>unloadEventStart</code></li>
					<li><code>unloadEventEnd</code></li>
					<li><code>redirectStart</code></li>
					<li><code>redirectEnd</code></li>
					<li><code>fetchStart</code></li>
					<li><code>domainLookupStart</code></li>
					<li><code>domainLookupEnd</code></li>
					<li><code>connectStart</code></li>
					<li><code>connectEnd</code></li>
					<li><code>secureConnectionStart</code></li>
					<li><code>requestStart</code></li>
					<li><code>responseStart</code></li>
					<li><code>responseEnd</code></li>
					<li><code>domLoading</code></li>
					<li><code>domInteractive</code></li>
					<li><code>domContentLoadedEventStart</code></li>
					<li><code>domContentLoadedEventEnd</code></li>
					<li><code>domComplete</code></li>
					<li><code>loadEventStart</code></li>
					<li><code>loadEventEnd</code></li>
				</ol>
				<footer id="perfint-nav-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if (!!window.performance && !!window.performance.navigation){ ... }</pre>
					<pre class="brush:js">if (!!window.performance && !!window.performance.timing){ ... }</pre>
				</footer>
				</div>
			</section>
			<section id="perfint-vis">
				<header><h1>Page Visibility</h1></header>
				<div>
				<p>Detect when page is visible for power efficiency</p>
<pre class="brush:js">var timer = 0, 
	intervalWhenVisible    = 1 * 1000,   // poll every second when visible
	intervalWhenNotVisible = 60 * 1000;  // poll every minute when not visible

$(function(){
	function update() { 
		// ...
	}

	function visibilityChanged() {
		clearTimeout(timer);
		timer = setInterval(update, document.hidden ? intervalWhenNotVisible : intervalWhenVisible);
	}

	visibilityChanged();
	if(document.addEventListener){ document.addEventListener("visibilitychange", visibilityChanged); }
});</pre>
				<p>...but, since the spec isn't done, you need a vendor prefix</p>
				<!-- TODO: Ensure vendor prefixes have been discussed (see feature detection) -->
				<!--pre>
					<code>
						if(!('hidden' in document) &amp;&amp; ('msHidden' in document || 'mozHidden' in document || 'webkitHidden' || 'oHidden')){
							
							if(document.addEventListener){ 
								document.addEventListener('msvisibilitychange', changed);
							}
							document.onvisibilitychange = function(){
								document.msvisibilitychange = 
							}
						}
					</code>
				</pre-->
				<footer id="perfint-vis-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if ('msHidden' in document || 'mozHidden' in document || 'webkitHidden' in document || 'oHidden' in document){ ... }</pre>
				</footer>
				</div>
			</section>
			<section id="perfint-immed">
				<header><h1>setImmediate</h1></header>
				<div>
				<p>Immediate async script execution via <code>window.setImmediate()</code></p>
				<p>Avoids minimum delay built into <code>window.setTimeout()</code></p>
				<footer id="perfint-immed-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if (!!window.setImmediate){ ... }</pre>
					<h2>Fallback...</h2>
					<pre class="brush:js">window.setImmediate = window.setImmediate || window.setTimeout</pre>
				</footer>
				</div>
			</section>
			<section id="perfint-anim">
				<header><h1>requestAnimationFrame</h1></header>
				<div>
				<p>More efficient script-based animations</p>
				<p>Browser determines animation rate based on various factors (e.g. active tab, CPU utilization)</p>
				<footer id="perfint-anim-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if (!!window.requestAnimationFrame){ ... }</pre>
					<h2>Fallback...</h2>
					<ul>
						<li><a href="http://gist.github.com/838785">gist.github.com/838785</a> &ndash; falls back on <code>window.setTimeout</code></li>
					</ul>
				</footer>
				</div>
			</section>
			<section id="perfint-history">
				<header><h1>History</h1></header>
				<div>
				<p>Manipulate the browser URL (and, thereby, the history) without refreshing the page</p>
				<pre class="brush:js">history.pushState([data], [title], [url]);</pre>
				<p>Or, change the URL without adding an extra item in the history...</p>
				<pre class="brush:js">history.replaceState([data], [title], [url]);</pre>
				<footer id="perfint-history-footer">
					<h1>The more you know...</h1>
					<h2>Detection...</h2>
					<pre class="brush:js">if (!!history.pushState){ ... }</pre>
					<h2>Fallback...</h2>
					<ul>
						<li><a href="https://github.com/balupton/history.js">history.js</a> &ndash; falls back to <code>window.onhashchange</code></li>
					</ul>
				</footer>
				</div>
			</section>
		</article>


		<article id="styling">
			<header id="styling-top">
				<h1>CSS3 Styling</h1>
				<blockquote cite="http://w3.org/html/logo">
					<p>
						CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing 
						your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides 
						typographic flexibility and control far beyond anything the web has offered before.
					</p>
					<div class="author">W3C</div>
				</blockquote>
			</header>
			<section id="styling-all">
				<header><h1>New with CSS3</h1></header>
				<div>
				<ul>
					<li>Selectors</li>
					<li>Namespaces</li>
					<li>Values/Units</li>
					<li>Backgorunds &ndash; multiple background images, <code>background-size</code>, <code>box-shadow</code></li>
					<li>Borders &ndash; <code>border-radius</code>, <code>border-image</code></li>
					<li>Colors &ndash; <code>linear-gradient</code>, <code>radial-gradient</code>, <code>opacity</code>, <code>rgba()</code>, <code>hsl(), <code>hsla()</code></code></li>
					<li>Text &ndash; <code>text-shadow</code>, <code>@font-face</code>, <code>:selection</code></li>
					<li>Positioning &ndash; positioned floats, floating point value support</li>
					<li>Layout &ndash; flexbox, grid layout, multiple columns, regions, template, box sizing</li>
					<li>Media Queries</li>
					<li>Transforms &ndash; translate, rotation, scale</li>
					<li>Animations/Transitions</li>
				</ul>
				</div>
			</section>
			<section id="styling-footer">
				<h1>The more you know...</h1>
				<h2>Detection...</h2>
				<p><a href="http://www.modernizr.com/docs/#features-css">See Modernizer for a list</a></p>
				<h2>Fallbacks...</h2>
				<ul>
					<li><a href="https://github.com/scottjehl/Respond">Respond.js</a> &ndash; media queries</li>
					<li><a href="http://code.google.com/p/css3-mediaqueries-js">css3-mediaqueries.js</a></li>
					<li><a href="http://adapt.960.gs/">Adapt.js</a> &ndash; media queries; requires non-CSS config</li>
					<li><a href="http://css3pie.com/">PIE</a> &ndash; <code>border-radius</code>, <code>box-shadow</code>, <code>linear-gradient</code>; targets IE6-8</li>
					<li><a href="http://selectivizr.com">Select[ivizr]</a> &ndash; CSS3 selectors for IE6-8</li>
					<li><a href="http://transformie.com">Transformie</a> &ndash; CSS3 transforms via IE6+ <code>filter</code></li>
					<li><a href="https://github.com/doctyper/flexie">Flexie</a> &ndash; flexbox for IE6-9 and Opera 10+</li>
					<li><a href="https://github.com/heygrady/textshadow">jquery.textshadow</a> &ndash; for IE6-9</li>
					<li><a href="http://ricardrobin.github.com/Regions.js/">Regions.js</a></li>
				</ul>
				<h2>References...</h2>
				<ul>
					<li><a href="http://css-tricks.com">CSS Tricks</a></li>
					<li><a href="http://css.me">CSS Generator</a></li>
					<li><a href="http://mediaqueri.es">mediaqueri.es</a></li>
				</ul>
				<h2>More...</h2>
				<ul>
					<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/CMP01">HTML5/CSS3 Boot Camp (Mix11)</a></li>
					<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM09">The View of the World Depends on the Glasses I Wear (Mix11)</a></li>
					<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/EXT20">CSS3 Takes on the World (Mix11)</a></li>
				</ul>
			</section>
		</article>


		<article id="future">
			<header id="future-top"><h1>Future of HTML</h1></header>
			<footer id="future-footer">
				<h1>The more you know...</h1>
				<ul>
					<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM17">The Future of HTML5 (Mix11)</a></li>
				</ul>
			</footer>
		</article>
		<article id="tools">
			<header id="tools-top"><h1>HTML5 Tools</h1></header>
			<section id="tools-main">
			<ul>
				<li><a href="http://msdn.microsoft.com/en-us/library/gg589507(v=VS.85).aspx">IE9 F12 Developer Tools</a></li>
				<li><a href="http://msdn.microsoft.com/vstudio/">Visual Studio</a></li>
				<li><a href="http://www.microsoft.com/download/en/details.aspx?id=23691">Visual Studio SP1</a></li>
				<li><a href="http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83">Web Standards Update for Visual Studio SP1</a></li>
				<li><a href="http://www.asp.net/mvc/mvc3">ASP.NET MVC3</a></li>
			</ul>
			<footer id="tools-footer">
				<h1>The more you know...</h1>
				<ul>
					<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM18">Hacking with the F12 Developer Tools (Mix11)</a></li>
					<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM08">The Devil Went Down to HTTP: Debugging with Fiddler (Mix11)</a></li>
				</ul>
			</footer>
			</section>
		</article>
		<article id="resources">
			<header id="resources-top"><h1>HTML5 Resources</h1></header>
			<section id="resources-main">
			<h1>Are you valid?</h1>
			<ul>
				<li><a href="http://validator.whatwg.org">validator.whatwg.org</a></li>
				<li><a href="http://validator.w3.org">validator.w3.org</a></li>
				<li><a href="http://html5.validator.nu">html5.validator.nu</a></li>
			</ul>
			<h1>More...</h1>
			<ul>
				<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM01">50 Performance Tricks to Make Your HTML5 Web Sites Faster (Mix11)</a></li>
				<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM14">HTML5 for Silverlight Developers (Mix11)</a></li>
				<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM11">IE 10 Platform Preview 1: The Future of Adaptive Web Design (Mix11)</a></li>
				<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM06">JavaScript: The Language (Mix11)</a></li>
				<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/HTM05">Going Mobile with Your Site on Internet Explorer 9 and Windows Phone 7 (Mix11)</a></li>
				<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/RES02">Interactive Panel: JavaScript (Mix11)</a></li>
				<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/FRM01">Designing Great Experiences for SharePoint 2010 (Mix11)</a></li>
				<li><a href="http://channel9.msdn.com/Events/MIX/MIX11/EXT21">HTML5 for Skeptics (Mix11)</a></li>
			</ul>
			</section>
		</article>


		<aside>
			<article id="appendix">
				<header><h1>Appendices</h1></header>
				<section id="appendixa">
					<header><h1>Appendix A. Publications by Organization</h1></header>
					<!-- TODO: Redo this section using Microdata -->
					<ul>
						<li>
							<a href="http://whatwg.org"><abbr title="Web hypertext Application Techonlogy">WHAT</abbr> Working Group</a>
							<ul>
								<li level="1" bugs="292" pages="1787" date="2011-06-01" asof="2011-05-31"><a href="http://whatwg.org/html">HTML "Living Standard"</a></li>
							</ul>
						</li>
						<li>
							<a href="http://w3.org"><abbr title="World Wide Web Consortium">W3C</abbr></a>
							<ul>
								<li>
									<a href="http://www.w3.org/Style/CSS/"><abbr title="Cascading Style Sheets">CSS</abbr> Working Group</a>
									<!-- NOTE: To get the page numbers, I had to paste as text because the formatting for every page I copied broke in Word -->
									<ul class="css">
										<li level="5" asof="2011-06-01" date="2008-04-11" pages="127" bugs="0"><a href="http://www.w3.org/TR/CSS1/">CSS1</a></li>
										<li level="5" asof="2011-06-01" date="2008-04-11" pages="10"  bugs="0"><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/">CSS2</a></li>
										<li level="3" asof="2011-06-01" date="2011-04-12" pages="39"  bugs="0"><a href="http://www.w3.org/TR/CSS21/">CSS 2.1</a></li>
										<li level="-5" asof="2011-06-01" date="2011-05-12" pages="7"   bugs="0"><a href="http://www.w3.org/TR/2011/NOTE-css-beijing-20110512/">Snapshot 2007</a></li>
										<li level="-5" asof="2011-06-01" date="2011-05-12" pages="76"  bugs="0"><a href="http://www.w3.org/TR/2011/NOTE-css-2010-20110512/">Snapshot 2010</a></li>
										<li level="1" asof="2011-06-01" date="2011-04-14" pages="27"  bugs="0"><a href="http://dev.w3.org/csswg/css3-2d-transforms/">2D Transforms</a></li>
										<li level="1" asof="2011-06-01" date="2011-03-21" pages="31"  bugs="0"><a href="http://dev.w3.org/csswg/css3-3d-transforms/">3D Transforms</a></li>
										<li level="1" asof="2011-06-01" date="2011-04-05" pages="43"  bugs="0"><a href="http://dev.w3.org/csswg/css3-animations/">Animations</a></li>
										<li level="0" asof="2011-06-01" date=""           pages="0"   bugs="0">Aural Style Sheets</li>
										<li level="3" asof="2011-06-01" date="2011-05-17" pages="130" bugs="0"><a href="http://dev.w3.org/csswg/css3-background/">Backgrounds and Borders L3</a></li>
										<li level="0" asof="2011-06-01" date="2010-04-01" pages="21"  bugs="0"><a href="http://dev.w3.org/csswg/css4-background/">Backgrounds and Borders L4</a></li>
										<li level="1" asof="2011-06-01" date="2007-10-19" pages="10"  bugs="0"><a href="http://www.w3.org/TR/becss/">Behavioral Extensions</a></li>
										<li level="1" asof="2011-06-01" date="2007-08-09" pages="126" bugs="0"><a href="http://www.w3.org/TR/css3-box/">Box Model (Basic)</a></li>
										<li level="0" asof="2011-06-01" date=""           pages="0"   bugs="0">Box Model (Extended)</li>
										<li level="1" asof="2011-06-01" date="2009-01-19" pages="16"  bugs="0"><a href="http://dev.w3.org/csswg/css3-cascade/">Cascading and Inheritance</a></li>
										<li level="3" asof="2011-06-01" date="2010-10-28" pages="191" bugs="0"><a href="http://www.w3.org/TR/css3-color">Color</a></li>
										<li level="0" asof="2011-06-01" date="2011-02-24" pages="9"   bugs="0"><a href="http://dev.w3.org/csswg/css-color-correction/">Color Correction</a></li>
										<li level="0" asof="2011-06-01" date="2011-05-10" pages="59"  bugs="0"><a href="http://dev.w3.org/csswg/css-device-adapt/">Device Adaptation</a></li>
										<li level="0" asof="2011-06-01" date="2011-05-04" pages="38"  bugs="0"><a href="http://dev.w3.org/csswg/css3-exclusions/">Exclusions</a></li>
										<li level="1" asof="2011-06-01" date="2011-04-19" pages="31"  bugs="0"><a href="http://dev.w3.org/csswg/css3-flexbox/">Flexible Box Layout</a></li>
										<li level="1" asof="2011-06-01" date="2011-04-28" pages="134" bugs="0"><a href="http://dev.w3.org/csswg/css3-fonts/">Fonts</a></li>
										<li level="1" asof="2011-06-01" date="2011-04-20" pages="46"  bugs="0"><a href="http://dev.w3.org/csswg/css3-content/">Generated and Replaced Content</a></li>
										<li level="1" asof="2011-06-01" date="2010-11-01" pages="95"  bugs="0"><a href="http://dev.w3.org/csswg/css3-gcpm/">Generated Content for Paged Media</a></li>
										<li level="1" asof="2011-06-01" date="2011-04-01" pages="71"  bugs="0"><a href="http://dev.w3.org/csswg/css3-grid-align/">Grid Layout</a></li>
										<li level="1" asof="2011-06-01" date="2008-01-16" pages="24"  bugs="0"><a href="http://dev.w3.org/csswg/css3-grid/">Grid Positioning</a></li>
										<li level="1" asof="2011-06-01" date="2004-02-24" pages="21"  bugs="0"><a href="http://www.w3.org/TR/css3-hyperlinks">Hyperlink Presentation</a></li>
										<li level="1" asof="2011-06-01" date="2011-05-26" pages="46"  bugs="0"><a href="http://dev.w3.org/csswg/css3-images/">Image Values and Replaced Content</a></li>
										<li level="1" asof="2011-06-01" date="2011-03-16" pages="111" bugs="0"><a href="http://dev.w3.org/csswg/css3-linebox/">Line Formatting</a></li>
										<li level="0" asof="2011-06-01" date="2011-06-01" pages="28"  bugs="0"><a href="http://dev.w3.org/csswg/css-line-grid/">Line Grid</a></li>
										<li level="1" asof="2011-06-01" date="2011-05-24" pages="144" bugs="0"><a href="http://dev.w3.org/csswg/css3-lists/">Lists and Counters</a></li>
										<li level="3" asof="2011-06-01" date="2008-12-05" pages="27"  bugs="0"><a href="http://www.w3.org/TR/css3-marquee/">Marquee</a></li>
										<li level="0" asof="2011-06-01" date=""           pages="0"   bugs="0">Math</li>
										<li level="3" asof="2011-06-01" date="2010-08-03" pages="25"  bugs="0"><a href="http://dev.w3.org/csswg/css3-mediaqueries/">Media Queries</a></li>
										<li level="3" asof="2011-06-01" date="2008-12-10" pages="33"  bugs="0"><a href="http://www.w3.org/TR/css-mobile/">Mobile Profile 2.0</a></li>
										<li level="3" asof="2011-06-01" date="2011-05-15" pages="72"  bugs="0"><a href="http://dev.w3.org/csswg/css3-multicol/">Multi-column Layout</a></li>
										<li level="3" asof="2011-06-01" date="2011-04-07" pages="10"  bugs="0"><a href="http://dev.w3.org/csswg/css3-namespace/">Namespaces</a></li>
										<li level="0" asof="2011-06-01" date="2010-08-31" pages="97"  bugs="0"><a href="http://dev.w3.org/csswg/cssom/">Object Model L3</a></li>
										<li level="1" asof="2011-06-01" date="2010-08-31" pages="30"  bugs="0"><a href="http://dev.w3.org/csswg/cssom-view/">Object Model View</a></li>
										<li level="1" asof="2011-06-01" date="2010-10-25" pages="94"  bugs="0"><a href="http://dev.w3.org/csswg/css3-page/">Page Media</a></li>
										<li level="1" asof="2011-06-01" date="2003-08-13" pages="10"  bugs="0"><a href="http://www.w3.org/TR/css3-preslev/">Presentation Levels</a></li>
										<li level="2" asof="2011-06-01" date="2006-10-13" pages="60"  bugs="0"><a href="http://www.w3.org/TR/css-print/">Print Profile</a></li>
										<li level="0" asof="2011-06-01" date=""           pages="0"   bugs="0">Positioning</li>
										<li level="1" asof="2011-06-01" date="2004-02-24" pages="9"   bugs="0"><a href="http://www.w3.org/TR/css3-reader">Reader Media Type</a></li>
										<li level="0" asof="2011-06-01" date="2011-05-29" pages="57"  bugs="0"><a href="http://dev.w3.org/csswg/css3-regions/">Regions</a></li>
										<li level="3" asof="2011-06-01" date="2010-12-03" pages="36"  bugs="0"><a href="http://dev.w3.org/csswg/css3-ruby/">Ruby</a></li>
										<li level="0" asof="2011-06-01" date=""           pages="0"   bugs="0">Scoping</li>
										<li level="3" asof="2011-06-01" date="2011-02-17" pages="82"  bugs="0"><a href="http://dev.w3.org/csswg/selectors3/">Selectors L3</a></li>
										<li level="0" asof="2011-06-01" date="2011-03-28" pages="71"  bugs="0"><a href="http://dev.w3.org/csswg/selectors4/">Selectors L4</a></li>
										<li level="1" asof="2011-06-01" date="2011-05-26" pages="87"  bugs="0"><a href="http://dev.w3.org/csswg/css3-speech/">Speech</a></li>
										<li level="3" asof="2011-06-01" date="2010-10-12" pages="6"   bugs="0"><a href="http://www.w3.org/TR/css-style-attr">Style Attributes</a></li>
										<li level="1" asof="2011-06-01" date="2003-08-13" pages="74"  bugs="0"><a href="http://www.w3.org/TR/css3-syntax/">Syntax</a></li>
										<li level="0" asof="2011-06-01" date=""           pages="42"  bugs="0"><a href="http://dev.w3.org/csswg/css3-tables-algorithms/Overview.src.htm">Tables</a></li>
										<li level="1" asof="2011-06-01" date="2010-04-29" pages="44"  bugs="0"><a href="http://www.w3.org/TR/css3-layout/">Template Layout</a></li>
										<li level="1" asof="2011-06-01" date="2011-05-23" pages="184" bugs="0"><a href="http://dev.w3.org/csswg/css3-text/">Text</a></li>
										<li level="1" asof="2011-06-01" date="2011-04-05" pages="41"  bugs="0"><a href="http://dev.w3.org/csswg/css3-transitions/">Transitions</a></li>
										<li level="3" asof="2011-06-01" date="2003-05-14" pages="65"  bugs="0"><a href="http://www.w3.org/TR/css-tv">TV Profile</a></li>
										<li level="3" asof="2011-06-01" date="2011-05-08" pages="113" bugs="0"><a href="http://dev.w3.org/csswg/css3-ui/">UI</a></li>
										<li level="1" asof="2011-06-01" date="2011-03-21" pages="43"  bugs="0"><a href="http://dev.w3.org/csswg/css3-values/">Values and Units</a></li>
										<li level="1" asof="2011-06-01" date="2011-05-31" pages="80"  bugs="0"><a href="http://dev.w3.org/csswg/css3-writing-modes/">Writing Modes</a></li>
									</ul>
								</li>
								<li>
									<a href="http://www.w3.org/2009/dap/">Device APIs Working Group</a>
									<ul class="device">
										<li level="-1" asof="2011-06-03" date="2011-03-16" pages="10"  bugs="0"><a href="http://dev.w3.org/2009/dap/policy-reqs/">Access Control Use Cases and Requirements</a></li>
										<li level="-0" asof="2011-06-03" date="2009-11-30" pages="2"   bugs="0"><a href="http://dev.w3.org/2009/dap/design-patterns/">APIs Design Patterns</a></li>
										<li level="-1" asof="2011-06-03" date="2011-01-05" pages="6"   bugs="0"><a href="http://dev.w3.org/2009/dap/api-reqs/">APIs Requirements</a></li>
										<li level="0" asof="2011-06-03" date="2010-11-02" pages="11"  bugs="0"><a href="http://dev.w3.org/2009/dap/app-launcher/">Application Launcher</a></li>
										<li level="1" asof="2011-06-03" date="2011-06-01" pages="4"   bugs="0"><a href="http://dev.w3.org/2009/dap/system-info/battery-status.html">Batter Status</a></li>
										<li level="1" asof="2011-06-03" date="2011-05-05" pages="26"  bugs="1"><a href="http://dev.w3.org/2009/dap/calendar/">Calendar API</a></li>
										<li level="1" asof="2011-06-03" date="2011-05-25" pages="31"  bugs="1"><a href="http://dev.w3.org/2009/dap/contacts/">Contact API</a></li>
										<li level="0" asof="2011-06-03" date="2011-05-31" pages="3"   bugs="0"><a href="http://dev.w3.org/2009/dap/perms/FeaturePermissions.html">Feature Permissions</a></li>
										<li level="0" asof="2011-06-03" date="2010-11-04" pages="12"  bugs="0"><a href="http://dev.w3.org/2009/dap/gallery/">Gallery</a></li>
										<li level="1" asof="2011-06-03" date="2011-04-06" pages="7"   bugs="1"><a href="http://dev.w3.org/2009/dap/camera/">Media Capture API</a></li>
										<li level="1" asof="2011-06-03" date="2010-12-02" pages="9"   bugs="0"><a href="http://dev.w3.org/2009/dap/camera/Overview-API.html">Media Capture (HTML)</a></li>
										<li level="1" asof="2011-06-03" date="2011-05-05" pages="5"   bugs="1"><a href="http://dev.w3.org/2009/dap/messaging/">Messaging API</a></li>
										<li level="0" asof="2011-06-03" date="2011-06-01" pages="3"   bugs="0"><a href="http://dev.w3.org/2009/dap/netinfo/">Network Information API</a></li>
										<li level="-1" asof="2011-06-03" date="2010-06-23" pages="7"   bugs="4"><a href="http://dev.w3.org/2009/dap/privacy-reqs/">Privacy Requirements</a></li>
										<li level="0" asof="2011-06-03" date="2011-04-20" pages="7"   bugs="0"><a href="http://dev.w3.org/2009/dap/privacy-rulesets/">Privacy Ruleset</a></li>
										<li level="1" asof="2011-06-03" date="2010-09-30" pages="6"   bugs="0"><a href="http://dev.w3.org/2009/dap/api-perms/">Permissions for Device API Access</a></li>
										<li level="1" asof="2011-06-03" date="2011-03-16" pages="36"  bugs="2"><a href="http://dev.w3.org/2009/dap/system-info/">Systems Info and Events</a></li>
										<li level="0" asof="2011-06-03" date=""           pages="0"   bugs="0">Tasks</li>
										<li level="0" asof="2011-06-03" date=""           pages="0"   bugs="0">User Interaction</li>
									</ul>
								</li>
								<li>
									<a href="http://www.w3.org/2008/geolocation/">Geolocation Working Group</a>
									<ul class="geo">
										<li level="0" asof="2011-06-03" date="2011-05-17" pages="13"  bugs="0"><a href="http://dev.w3.org/geo/api/spec-source-orientation.html">DeviceOrientation Event</a></li>
										<li level="3" asof="2011-06-03" date="2010-02-10" pages="23"  bugs="0"><a href="http://dev.w3.org/geo/api/spec-source.html">Geolocation API</a></li>
										<li level="0" asof="2011-06-03" date="2009-06-26" pages="21"  bugs="0"><a href="http://dev.w3.org/geo/api/spec-source-v2.html">Geolocation API L2</a></li>
									</ul>
								</li>
								<li>
									<a href="http://www.w3.org/html/wg"><abbr title="Hypertext Markup Language">HTML</abbr> Working Group</a>
									<ul class="html">
										<li level="2" bugs="256" pages="1308" date="2011-05-25" asof="2011-05-30"><a href="http://dev.w3.org/html5/spec/">HTML5</a></li>
										<li level="2" bugs="0"   pages="40"   date="2011-05-24" asof="2011-06-06"><a href="http://dev.w3.org/html5/rdfa/">HTML + RDFa</a></li>
										<li level="2" bugs="4"   pages="35"   date="2011-05-24" asof="2011-05-30"><a href="http://dev.w3.org/html5/md/">HTML Microdata</a></li>
										<li level="2" bugs="11"  pages="48"   date="2011-05-24" asof="2011-05-30"><a href="http://dev.w3.org/html5/2dcontext/">HTML Canvas 2D Context</a></li>
										<li level="-1" bugs="1"   pages="2475" date="2011-05-26" asof="2011-05-30"><a href="http://dev.w3.org/html5/markup/">HTML5 Markup</a></li>
										<li level="-1" bugs="5"   pages="26"   date="2011-05-24" asof="2011-05-30"><a href="http://dev.w3.org/html5/html4-differences/">HTML5 Diff from HTML4</a></li>
										<li level="3" bugs="3"   pages="23"   date="2011-05-25" asof="2011-05-30"><a href="http://dev.w3.org/html5/html-xhtml-author-guide/html-xhtml-authoring-guide.html">Polyglot Markup (HTML/XHTML Compat)</a></li>
										<li level="2" bugs="4"   pages="42"   date="2011-05-26" asof="2011-05-30"><a href="http://dev.w3.org/html5/alt-techniques/">Text Alternatives</a></li>
									</ul>
								</li>
								<li>
									<a href="http://www.w3.org/2010/02/rdfa">RDF Web Apps Working Group</a>
									<ul>
										<li level="0"  bugs="4"   pages="10"   date=""           asof="2011-06-06"><a href="http://www.w3.org/2010/02/rdfa/sources/rdf-api/Overview-src.html">RDF API</a></li>
										<li level="1"  bugs="4"   pages="44"   date="2011-05-10" asof="2011-06-06"><a href="http://www.w3.org/TR/rdf-interfaces/">RDF Interfaces</a></li>
										<li level="1"  bugs="5"   pages="34"   date="2011-04-19" asof="2011-06-06"><a href="http://www.w3.org/2010/02/rdfa/drafts/2011/WD-rdfa-api-20110419/">RDFa 1.1 API</a></li>
										<li level="2"  bugs="6"   pages="82"   date="2011-05-26" asof="2011-06-06"><a href="http://www.w3.org/2010/02/rdfa/drafts/2011/ED-rdfa-core-20110306/">RDFa 1.1 Core</a></li>
										<li level="3"  bugs="0"   pages="54"   date="2011-03-06" asof="2011-06-06"><a href="http://www.w3.org/2010/02/rdfa/drafts/2011/ED-xhtml-rdfa-20110306/">XHTML + RDFa 1.1</a></li>
										<li level="-1"  bugs="0"   pages="32"   date="2011-04-19" asof="2011-06-06"><a href="http://www.w3.org/2010/02/rdfa/sources/rdfa-primer/">RDFa Primer</a></li>
										<li level="-0"  bugs="1"   pages="0"    date="2011-05-26" asof="2011-06-06">RDFa Usage Cookbook</li>
										<li asof="2011-06-06"><a href="http://dev.w3.org/html5/rdfa/">HTML + RDFa</a> (partnering with the HTML WG)</li>
									</ul>
								</li>
								<li>
									<a href="http://www.w3.org/Graphics/SVG/"><abbr title="Scalable Vector Graphics">SVG</abbr> Working Group</a>
									<ul class="svg">
										<li level="5" asof="2011-06-02" date="2009-04-30" pages="6"   bugs="0"><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/">SVG 1.1</a></li>
										<li level="2" asof="2011-06-02" date="2011-05-12" pages="5"   bugs="31"><a href="http://www.w3.org/TR/SVG11/">SVG 1.1 2Ed</a></li>
										<li level="5" asof="2011-06-02" date="2009-06-15" pages="128" bugs="0"><a href="http://www.w3.org/TR/SVGMobile/">SVG 1.1 Mobile</a></li>
										<li level="5" asof="2011-06-02" date="2008-12-22" pages="7"   bugs="5"><a href="http://www.w3.org/TR/SVGTiny12/">SVG 1.2 Tiny</a></li>
										<li level="0" asof="2011-06-02" date=""            pages="0"   bugs="158">SVG2</li>
										<li level="-5" asof="2011-06-02" date="2000-08-07" pages="49"  bugs="2"><a href="http://www.w3.org/TR/SVG-access/">Accessibility</a></li>
										<li level="1" asof="2011-06-02" date="2009-10-01" pages="6"   bugs="0"><a href="http://www.w3.org/TR/SVGColorPrimer12/">Color: Primer</a></li>
										<li level="1" asof="2011-06-02" date="2009-10-01" pages="26"  bugs="0"><a href="http://www.w3.org/TR/SVGColor12/">Color: Language</a></li>
										<li level="2" asof="2011-06-02" date="2011-05-15" pages="44"  bugs="1"><a href="http://www.w3.org/TR/SVGCompositing/">Compositing</a></li>
										<li level="0" asof="2011-06-02" date="2011-01-08" pages="3"   bugs="0"><a href="http://dev.w3.org/SVG/modules/connector/SVGConnectorPrimer.html">Connector: Primer</a></li>
										<li level="0" asof="2011-06-02" date="2011-01-08" pages="39"  bugs="0"><a href="http://dev.w3.org/SVG/modules/connector/SVGConnector.html">Connector: Language</a></li>
										<li level="1" asof="2011-06-02" date="2007-05-01" pages="4"   bugs="0"><a href="http://www.w3.org/TR/SVGFilterReqs12/">Filter Requirements</a></li>
										<li level="1" asof="2011-06-02" date="2007-05-01" pages="8"   bugs="0"><a href="http://www.w3.org/TR/SVGFilterPrimer12/">Filters: Primer</a></li>
										<li level="1" asof="2011-06-02" date="2007-05-01" pages="129" bugs="9"><a href="http://www.w3.org/TR/SVGFilter12/">Filters: Language</a></li>
										<li level="0" asof="2011-06-02" date="2011-05-13" pages="7"   bugs="0"><a href="http://dev.w3.org/SVG/modules/advancedgradients/SVGAdvancedGradientReqs.html">Gradients (Advanced)</a></li>
										<li level="0" asof="2011-06-02" date=""           pages="0"   bugs="0">Fonts</li>
										<li level="0" asof="2011-06-02" date="2009-10-01" pages="100" bugs="3"><a href="http://dev.w3.org/SVG/modules/integration/SVGIntegration.html">Integration</a></li>
										<li level="0" asof="2011-06-02" date="2009-02-13" pages="12"  bugs="0"><a href="http://dev.w3.org/SVG/modules/layout/publish/SVGLayoutReqs.html">Layout Requirements and Use Cases</a></li>
										<li level="0" asof="2011-06-02" date="2008-07-11" pages="3"   bugs="0"><a href="http://dev.w3.org/SVG/modules/layout/publish/SVGLayoutPrimer.html">Layout: Primer</a></li>
										<li level="0" asof="2011-06-02" date="2008-07-11" pages="9"   bugs="0"><a href="http://dev.w3.org/SVG/modules/layout/publish/SVGLayout.html">Layout: Language</a></li>
										<li level="0" asof="2011-06-02" date=""           pages="0"   bugs="0">Masking and Clipping</li>
										<li level="1" asof="2011-06-02" date="2008-01-14" pages="22"  bugs="0"><a href="http://dev.w3.org/SVG/modules/mae/master/MediaAccessEvents.html">Media Access Events</a></li>
										<li level="0" asof="2011-06-02" date=""           pages="0"   bugs="0">Paint Servers</li>
										<li level="1" asof="2011-06-02" date="2009-06-16" pages="12"  bugs="0"><a href="http://www.w3.org/TR/SVGParamPrimer/">Parameters: Primer</a></li>
										<li level="1" asof="2011-06-02" date="2009-06-16" pages="19"  bugs="0"><a href="http://www.w3.org/TR/SVGParam/">Parameters: Language</a></li>
										<li level="0" asof="2011-06-02" date=""           pages="10"  bugs="0"><a href="http://dev.w3.org/SVG/modules/color/master/SVGColorReqs.html">Printing Requirements</a></li>
										<li level="0" asof="2011-06-02" date=""           pages="0"   bugs="0">pinnedClip Requirements</li>
										<li level="0" asof="2011-06-02" date=""           pages="0"   bugs="0">pinnedClip: Primer</li>
										<li level="0" asof="2011-06-02" date="2009-07-03" pages="6"   bugs="0"><a href="http://dev.w3.org/SVG/modules/pinnedclip/master/SVGpinnedClip.html">pinnedClip: Language</a></li>
										<li level="0" asof="2011-06-02" date="2008-12-01" pages="10"  bugs="0"><a href="http://dev.w3.org/SVG/modules/print/master/SVGPrintReqs.html">Print Requirements</a></li>
										<li level="0" asof="2011-06-02" date="2008-12-01" pages="17"  bugs="0"><a href="http://dev.w3.org/SVG/modules/print/master/SVGPrintPrimer.html">Print: Primer</a></li>
										<li level="0" asof="2011-06-02" date="2008-12-01" pages="22"  bugs="0"><a href="http://dev.w3.org/SVG/modules/print/master/SVGPrint.html">Print: Language</a></li>
										<li level="0" asof="2011-06-02" date="2009-04-28" pages="7"   bugs="0"><a href="http://dev.w3.org/SVG/modules/ref/master/SVGRefPrimer.html">Referenced Parameter Variables: Primer</a></li>
										<li level="0" asof="2011-06-02" date="2009-05-07" pages="14"  bugs="0"><a href="http://dev.w3.org/SVG/modules/ref/master/SVGRef.html">Referenced Parameter Variables: Language</a></li>
										<li level="0" asof="2011-06-02" date=""           pages="8"   bugs="0"><a href="http://dev.w3.org/SVG/modules/renderorder/SVGRenderOrder.html">Rendering Order: Primer</a></li>
										<li level="0" asof="2011-06-02" date="2009-10-23" pages="8"   bugs="0"><a href="">Rendering Order: Language</a></li>
										<li level="0" asof="2011-06-02" date=""           pages="0"   bugs="0">Text</li>
										<li level="0" asof="2011-06-02" date="2009-02-13" pages="6"   bugs="0"><a href="http://dev.w3.org/SVG/modules/transforms/SVGTransformsReqs.html">Transforms Requirements</a></li>
										<li level="0" asof="2011-06-02" date=""           pages="0"   bugs="0">Transforms: Primer</li>
										<li level="1" asof="2011-06-02" date="2009-03-20" pages="22"  bugs="14"><a href="http://www.w3.org/TR/SVG-Transforms/">Transforms: Language</a></li>
										<li level="0" asof="2011-06-02" date=""           pages="0"   bugs="0">Transforms (2D FX): Primer</li>
										<li level="0" asof="2011-06-02" date=""           pages="0"   bugs="0">Transforms (2D FX): Language</li>
										<li level="0" asof="2011-06-02" date=""           pages="0"   bugs="0">Vector Effects Requirements</li>
										<li level="0" asof="2011-06-02" date="2009-07-23" pages="8"   bugs="0"><a href="http://dev.w3.org/SVG/modules/vectoreffects/master/SVGVectorEffectsPrimer.html">Vector Effects: Primer</a></li>
										<li level="0" asof="2011-06-02" date="2010-08-31" pages="13"  bugs="0"><a href="http://dev.w3.org/SVG/modules/vectoreffects/master/SVGVectorEffects.html">Vector Effects: Language</a></li>
									</ul>
								</li>
								<li>
									<a href="http://www.w3.org/2008/webapps"><abbr title="Web Applications">WebApps</abbr> Working Group</a>
									<ul class="webapps">
										<li level="0" asof="2011-05-30" date=""           pages="0"   bugs="0">Asynchronous DOM Mutation Notification</li>
										<li level="1" asof="2011-05-30" date="2011-05-18" pages="18"  bugs="2"><a href="http://dev.w3.org/2006/webapi/clipops/clipops.html">Clipboard APIs and Events</a></li>
										<li level="1" asof="2011-05-30" date="2010-11-17" pages="32"  bugs="1"><a href="http://dev.w3.org/2006/waf/access-control">Cross-Origin Resource Sharing (CORS)</a></li>
										<li level="5" asof="2011-05-30" date="1998-10-01" pages="4"   bugs="0"><a href="http://www.w3.org/TR/DOM-Level-1/">DOM L1</a></li>
										<li level="5" asof="2011-05-30" date="2000-11-13" pages="3"   bugs="0"><a href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM L2 Core</a></li>
										<li level="5" asof="2011-05-30" date="2000-11-13" pages="2"   bugs="0"><a href="http://www.w3.org/TR/DOM-Level-2-Events/">DOM L2 Events</a></li>
										<li level="5" asof="2011-05-30" date="2000-11-13" pages="3"   bugs="0"><a href="http://www.w3.org/TR/DOM-Level-2-HTML/">DOM L2 HTML</a></li>
										<li level="5" asof="2011-05-30" date="2000-11-13" pages="2"   bugs="0"><a href="http://www.w3.org/TR/DOM-Level-2-Style/">DOM L2 Style</a></li>
										<li level="5" asof="2011-05-30" date="2000-11-13" pages="3"   bugs="0"><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/">DOM L2 Traversal and Range</a></li>
										<li level="5" asof="2011-05-30" date="2000-11-13" pages="2"   bugs="0"><a href="http://www.w3.org/TR/DOM-Level-2-Views/">DOM L2 Views</a></li>
										<li level="-1" asof="2011-05-30" date="2002-07-25" pages="2"  bugs="0"><a href="http://www.w3.org/TR/DOM-Level-3-AS/">DOM L3 Abstract Schemas</a></li>
										<li level="5" asof="2011-05-30" date="2004-04-07" pages="3"  bugs="0"><a href="http://www.w3.org/TR/DOM-Level-3-Core/">DOM L3 Core</a></li>
										<li level="2" asof="2011-05-30" date="2011-05-24" pages="188" bugs="54"><a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM L3 Events</a></li>
										<li level="5" asof="2011-05-30" date="2004-04-07" pages="3"   bugs="0"><a href="http://www.w3.org/TR/DOM-Level-3-LS/">DOM L3 Load and Save</a></li>
										<li level="5" asof="2011-05-30" date="2004-01-27" pages="3"   bugs="0"><a href="http://www.w3.org/TR/DOM-Level-3-Val/">DOM L3 Validation</a></li>
										<li level="-1" asof="2011-05-30" date="2004-02-26" pages="2"   bugs="0"><a href="http://www.w3.org/TR/DOM-Level-3-Views/">DOM L3 Views and Formatting</a></li>
										<li level="-1" asof="2011-05-30" date="2004-02-26" pages="3"   bugs="0"><a href="http://www.w3.org/TR/DOM-Level-3-XPath/">DOM L3 Xpath</a></li>
										<li level="0" asof="2011-05-30" date=""           pages="0"   bugs="0">DOM L4 Core</li>
										<li level="-1" asof="2011-05-30" date="2004-02-26" pages="20"  bugs="0"><a href="http://www.w3.org/TR/DOM-Requirements/">DOM Requirements</a></li>
										<li level="5" asof="2011-05-30" date="2008-12-22" pages="11"  bugs="0"><a href="http://www.w3.org/TR/ElementTraversal/">Element Traversal</a></li>
										<li level="1" asof="2011-08-10" date="2011-08-10" pages="42"  bugs="0"><a href="http://dev.w3.org/2006/webapi/FileAPI/">File API</a></li>
										<li level="1" asof="2011-05-30" date="2011-05-27" pages="26"  bugs="0"><a href="http://dev.w3.org/2009/dap/file-system/file-dir-sys.html">File API: Directories and System</a></li>
										<li level="1" asof="2011-05-30" date="2011-05-27" pages="16"  bugs="0"><a href="http://dev.w3.org/2009/dap/file-system/file-writer.html">File API: Writer</a></li>
										<li level="1" asof="2011-08-10" date="2011-07-26" pages="111" bugs="14"><a href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">Indexed DB</a></li>
										<li level="-1" asof="2011-05-30" date="2011-03-29" pages="43"  bugs="0"><a href="http://dev.w3.org/2006/webapi/DataCache/">Programmable HTTP Caching and Serving</a></li>
										<li level="2" asof="2011-05-30" date="2011-05-10" pages="6"   bugs="0"><a href="http://dev.w3.org/2006/webapi/progress/">Progress Events</a></li>
										<li level="3" asof="2011-05-30" date="2009-12-22" pages="12"  bugs="0"><a href="http://dev.w3.org/2006/webapi/selectors-api/">Selectors API</a></li>
										<li level="1" asof="2011-05-30" date="2010-01-19" pages="14"  bugs="0"><a href="http://dev.w3.org/2006/webapi/selectors-api2/">Selectors API L2</a></li>
										<li level="2" asof="2011-08-10" date="2011-08-05" pages="26"  bugs="3"><a href="http://dev.w3.org/html5/eventsource/">Server-Sent Events</a></li>
										<li level="1" asof="2011-05-30" date="2010-06-15" pages="17"  bugs="0"><a href="http://dev.w3.org/2006/waf/UMP/">Uniform Messaging Policy</a></li>
										<li level="1" asof="2011-05-30" date="2011-05-31" pages="52"  bugs="0"><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">Web DOM Core</a></li>
										<li level="1" asof="2011-05-30" date="2011-05-30" pages="162" bugs="13"><a href="http://dev.w3.org/2006/webapi/WebIDL/">Web IDL</a></li>
										<li level="2" asof="2011-05-30" date="2011-05-27" pages="16"  bugs="0"><a href="http://dev.w3.org/html5/postmsg/">Web Messaging</a></li>
										<li level="1" asof="2011-05-30" date="2011-05-27" pages="15"  bugs="4"><a href="http://dev.w3.org/html5/websockets/">Web Sockets</a></li>
										<li level="-1" asof="2011-05-30" date="2010-11-18" pages="24"  bugs="0"><a href="http://dev.w3.org/html5/webdatabase/">Web SQL Database</a></li>
										<li level="1" asof="2011-05-30" date="2011-05-12" pages="16"  bugs="4"><a href="http://dev.w3.org/html5/webstorage/">Web Storage</a></li>
										<li level="2" asof="2011-05-30" date="2011-05-27" pages="36"  bugs="3"><a href="http://dev.w3.org/html5/workers/">Web Workers</a></li>
										<li level="3" asof="2011-05-30" date="2010-09-03" pages="88"  bugs="0"><a href="http://dev.w3.org/cvsweb/2006/xbl2/"><abbr title="XML Binding Language">XBL</abbr>2 Spec</a></li>
										<li level="-1" asof="2011-05-30" date="2007-07-18" pages="15"  bugs="0"><a href="http://www.w3.org/TR/xbl-primer//"><abbr title="XML Binding Language">XBL</abbr>2 Primer</a></li>
										<li level="3" asof="2011-05-30" date="2011-03-04" pages="25"  bugs="1"><a href="http://dev.w3.org/2006/webapi/XMLHttpRequest/">XmlHttpRequest</a></li>
										<li level="1" asof="2011-05-30" date="2011-03-04" pages="36"  bugs="0"><a href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/">XmlHttpRequest L2</a></li>
										<li level="3" asof="2011-05-30" date="2010-04-20" pages="9"   bugs="0"><a href="http://dev.w3.org/2006/waf/widgets-access/">Widget Access Request Policy</a></li>
										<li level="3" asof="2011-05-30" date="2011-05-24" pages="14"  bugs="0"><a href="http://dev.w3.org/2006/waf/widgets-digsig/">Widget Digital Signatures</a></li>
										<li level="2" asof="2011-05-30" date="2011-05-30" pages="21"  bugs="0"><a href="http://dev.w3.org/2006/waf/widgets-api/">Widget Interface</a></li>
										<li level="2" asof="2011-05-30" date="2010-06-02" pages="88"  bugs="0"><a href="http://dev.w3.org/2006/waf/widgets/">Widget Packaging and XML Configuration</a></li>
										<li level="1" asof="2011-05-30" date="2010-04-28" pages="16"  bugs="0"><a href="http://dev.w3.org/2006/waf/widgets-updates/">Widget Updates</a></li>
										<li level="2" asof="2011-05-30" date="2010-04-15" pages="5"   bugs="0"><a href="http://dev.w3.org/2006/waf/widgets-uri/">Widget URIs</a></li>
										<li level="3" asof="2011-05-30" date="2010-06-01" pages="6"   bugs="0"><a href="http://dev.w3.org/2006/waf/widgets-vmmf/">Widget view-mode Media Feature</a></li>
										<li level="0" asof="2011-05-30" date=""           pages=""    bugs="0">Widgets Embedding</li>
										<li level="-1" asof="2011-05-30" date="2008-04-14" pages="36"  bugs="0"><a href="http://dev.w3.org/2006/waf/widgets-land/">Widgets 1.0: Landscape</a></li>
										<li level="-1" asof="2011-05-30" date="2010-10-26" pages="33"  bugs="0"><a href="http://dev.w3.org/2006/waf/widgets-reqs/">Widgets 1.0: Requirements</a></li>
									</ul>
								</li>
								<li>
									<a href="http://www.w3.org/2010/web-notifications/">Web Notification Working Group</a>
									<ul class="webnot">
										<li level="0" asof="2011-06-03" date="2011-02-13" pages="10" bugs="0"><a href="http://dev.w3.org/2006/webapi/WebNotifications/publish/Notifications.html">Web Notifications</a></li>
										<li level="-0" asof="2011-06-03" date="2010-10-12" pages="3"  bugs="0"><a href="http://dev.w3.org/2006/webapi/WebNotifications/publish/Overview.html">Web Notifications Overview</a></li>
									</ul>
								</li>
								<li>
									<a href="http://www.w3.org/2010/webperf/" data-issues="http://www.w3.org/2010/webperf/track">Web Performance Working Group</a>
									<ul class="webperf">
										<li level="1" asof="2011-08-11" date="2011-07-27" pages="18" bugs="0"><a href="http://w3c-test.org/webperf/specs/NavigationTiming/">Navigation Timing</a></li>
										<li level="1" asof="2011-08-11" date="2011-08-10" pages="7"  bugs="0"><a href="http://w3c-test.org/webperf/specs/PerformanceTimeline/">Performance Timeline</a></li>
										<li level="1" asof="2011-08-11" date="2011-07-27" pages="18" bugs="0"><a href="http://w3c-test.org/webperf/specs/ResourceTiming/">Resource Timing</a></li>
										<li level="1" asof="2011-08-11" date="2011-07-27" pages="12" bugs="0"><a href="http://w3c-test.org/webperf/specs/UserTiming/">User Timing</a></li>
										<li level="1" asof="2011-08-11" date="2011-08-10" pages="8"  bugs="0"><a href="http://w3c-test.org/webperf/specs/PageVisibility/">Page Visibility</a></li>
										<li level="1" asof="2011-08-11" date="2011-07-26" pages="8"  bugs="3"><a href="http://w3c-test.org/webperf/specs/RequestAnimationFrame/">Timing Control for Script-Based Animations</a></li>
										<li level="1" asof="2011-08-11" date="2011-07-28" pages="6"  bugs="0"><a href="http://w3c-test.org/webperf/specs/setImmediate/">Efficient Script Yielding</a></li>
									</ul>
								</li>
								<li>
									<a href="http://www.w3.org/2011/04/webrtc-charter.html"><abbr title="Web Real-Time Communications">WebRTC</abbr> Working Group</a>
									<ul class="webrtc">
										<li level="0" asof="2011-05-30" date="" pages="0" bugs="0">Audio Stream Functions</li>
										<li level="0" asof="2011-05-30" date="" pages="0" bugs="0">Functional Component Functions</li>
										<li level="0" asof="2011-05-30" date="" pages="0" bugs="0">Media Stream Functions</li>
										<li level="0" asof="2011-05-30" date="" pages="0" bugs="0">P2P Connection Functions</li>
										<li level="0" asof="2011-05-30" date="" pages="0" bugs="0">Video Stream Functions</li>
									</ul>
								</li>
							</ul>
						</li>
						<li>
							<a href="https://ietf.org"><abbr title="Internet Engineering Task Force">IETF</abbr></a>
							<ul class="itef">
								<li>
									<a href="https://datatracker.ietf.org/wg/hybi"><abbr title="BiDirectional or Server-Initiated HTTP">HyBi</abbr> Working Group</a>
									<ul>
										<li level="1" bugs="0" pages="20" date="2010-12-29" asof="2011-05-30"><a href="https://datatracker.ietf.org/doc/draft-ietf-websec-origin">Web Origin Concept</a></li>
									</ul>
								</li>
								<li>
									<a href="https://datatracker.ietf.org/wg/websec"><abbr title="Web Security">WebSec</abbr> Working Group</a>
									<ul>
										<li level="1" bugs="7" pages="58" date="2011-04-22" asof="2011-05-30"><a href="https://datatracker.ietf.org/doc/draft-ietf-hybi-thewebsocketprotocol">WebSocket Protocol</a></li>
										<li level="-2" bugs="8" pages="10" date="2011-03-14" asof="2011-05-30"><a href="https://datatracker.ietf.org/doc/draft-ietf-hybi-websocket-requirements">WebSocket Requirements and Features</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li>
							<a href="http://ecma-international.org">Ecma International</a>
							<ul class="ecma">
								<li>
									<a href="http://www.ecma-international.org/memento/TC39.htm">ECMAScript (TC39)</a>
									<ul>
										<li level="5" asof="2011-06-03" date="2009-12-31" pages="252" bugs="0"><a href="https://datatracker.ietf.org/doc/draft-ietf-websec-origin">ECMA-262</a></li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</section>
			</article>
		</aside>


		<footer id="footer">
			<h1>Apple cares, Google cares, Microsoft cares...</h1>
			<ul>
				<li><a href="http://apple.com/html5">apple.com/html5</a></li>
				<li><a href="http://html5rocks.com">html5rocks.com</a></li>
				<li><a href="http://beautyoftheweb.com">beautyoftheweb.com</a></li>
				<li>...you care! ('cause I said so)</li>
			</ul>
		</footer>
	</div>


	<!-- javascript at the bottom for faster page loading -->
	<div id="scripts">
		<!-- use cdn w/ protocol-relative url; fall back to local if necessary -->
		<!-- TODO: Must have "http:" when running from local file system -->
		<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.min.js"></script>
		<script>window.jQuery || document.write('<script src="../scripts/jquery-1.6.2.min.js"><\/script>')</script>
		<script src="../scripts/read.js"></script>
		
		<!-- scripts concatenated and minified via ant build script-->
		<script src="../scripts/plugins.js"></script>
		
		<!-- fix any <img> or .png_bg bg-images @ http://goo.gl/mZiyb -->
		<!--[if lt IE 7]>
		<script src="../scripts/dd_belatedpng.js"></script>
		<script>DD_belatedPNG.fix("img, .png_bg")</script>
		<![endif]-->
	
		<!-- http://mathiasbynens.be/notes/async-analytics-snippet -->
		<script>
			var $w = $(window), w = $w.width(), h = $w.height(), _gaq = [['_setAccount', 'UA-86079-7'], ['_trackPageview'], ['_setCustomVar', 1, 'Browser Size', w + 'x' + h]];
			(function (d, t) { var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1; g.src = ("https:" == location.protocol ? "//ssl" : "http://www") + ".google-analytics.com/ga.js"; s.parentNode.insertBefore(g, s) } (document, "script"));
		</script>

		<!-- syntax highlighter -->
		<!-- TODO: Merge these scripts -->
		<script src="../scripts/shCore.js"></script> 
		<script src="../scripts/shBrushJScript.js"></script> 
		<script src="../scripts/shBrushXml.js"></script> 
		<script>SyntaxHighlighter.all();</script> 

		<!-- bing maps -->
		<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3&mkt=en-us"></script>
	</div>

</body>
</html>